Genummerde koppen in 100% puur CSS

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

Referenties

Leave a Reply

Your email address will not be published. Required fields are marked *