Tegenstijging - CSS-trucs

Inhoudsopgave

Geordende lijsten zijn niet de enige elementen die automatisch kunnen worden genummerd. Dankzij de verschillende tegengerelateerde eigenschappen kan elk element zijn.

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

Elk zal respectievelijk beginnen met "1", "2", "3" of "4".

U kunt de stijl van de teller bepalen door de tellerfunctie door komma's te scheiden. bijv. om ze Romeinse cijfers te laten gebruiken:

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

Demo

Op CodePen:

Meer informatie

  • CSS3-specificatie
  • MDN-documenten

Browser-ondersteuning

Chrome Safari Firefox Opera D.W.Z Android iOS
2+ 3.1+ Ieder 9.2+ 8+ Nader te bepalen Nader te bepalen

Interessante artikelen...