Pretapaugsme CSS-triki

Satura rādītājs

Kārtoti saraksti nav vienīgie elementi, kurus var automātiski numurēt. Pateicoties dažādām ar pretatkarību saistītajām īpašībām, jebkurš elements var būt.

 
body ( counter-reset: my-awesome-counter; ) section ( counter-increment: my-awesome-counter; ) section:before ( content: counter(my-awesome-counter); )

Katrs sāksies attiecīgi ar “1”, “2”, “3” vai “4”.

Skaitītāja stilu var kontrolēt, atdalot skaitītāja funkciju ar komatu. piemēram, lai liktu viņiem izmantot romiešu ciparus:

section:before ( content: counter(my-awesome-counter, upper-roman); )

Demonstrācija

CodePen:

Vairāk informācijas

  • CSS3 spec
  • MDN dokumenti

Pārlūka atbalsts

Chrome Safari Firefox Opera IE Android iOS
2+ 3.1+ Jebkurš 9.2+ 8+ TBD TBD

Interesanti raksti...