Met behulp van puur en alleen CSS is het mogelijk de koppen op een web pagina automatische te nummeren. Een 100% CSS implementatie dus waarbij niet de hulp van JavaScript ingeschakeld wordt.
CSS Counter
Sinds CSS versie 2.1 zijn de properties counter-reset en counter-increment aanwezig in de CSS standaard. Met deze twee properties kan respectievelijk een naam toegewezen worden aan een counter en kan de teller worden opgehoogd.
Om de counter te tonen, wordt gebruik gemaakt van de counter() functie van de content CSS property.
CSS code
.container {
/* Set the section counter to 0 */
counter-reset: section;
}
h1:before {
/* Increment the section counter */
counter-increment: section;
/* Display the counter */
content: counter(section) " ";
}
De counter wordt geïnitialiseerd met als naam “section” en waarde 0. Bij elke H1-tag op de pagina wordt de counter met één opgehoogd. De counter wordt getoond met CSS gegenereerde content in het h1 :before pseudo element.
Browser support
Browser support is al een flinke tijd aanwezig. Beschikbaar in Internet Explorer sinds versie 8.0, en in Chrome en Firefox al ongeveer vanaf het begin.
Demo
Een uitgewerkt voorbeeld: sandbox.juurlink.org/numberedheadingscss