CSS-tellers zijn een manier om automatische nummering en lijsten in uw webpagina’s te maken. Dit kan handig zijn voor het maken van genummerde hoofdstukken, paginering, enzovoort.
1. Stel de counter in: De eerste stap om een CSS-teller te gebruiken, is het instellen van de teller met behulp van de `counter-reset` eigenschap. Dit maakt een nieuwe teller en zet de waarde op nul (of een andere waarde als je wilt). Dit moet meestal gebeuren in een hoog niveau element dat het gebied omsluit waar je wilt tellen. Bijvoorbeeld:
```
body {counter-reset: section;}
```
In dit voorbeeld wordt een teller gemaakt met de naam ‘section’ en deze wordt gereset naar 0 wanneer het lichaamselement begint.
1. Verhoog de counter: Vervolgens moet je de teller verhogen telkens wanneer je een nieuw item wilt tellen. Dit gebeurt met de `counter-increment` eigenschap. Bijvoorbeeld:
```
h1 {counter-increment: section;}
```
Hiermee wordt de teller ‘section’ elke keer verhoogd als er een h1 is.
1. Gebruik de counter: Ten slotte moet je de teller ergens in je inhoud gebruiken. Dit gebeurt met de `content` eigenschap, samen met de `counter()` functie. Bijvoorbeeld:
```
h1::before {
content: “Section “ counter(section) “: “;
}
```
Hiermee wordt het woord “Section”, gevolgd door de huidige waarde van de teller ‘section’, en vervolgens een dubbele punt en een spatie toegevoegd aan het begin van elke h1.
Het resultaat van dit voorbeeld zou zijn hoofdstukken die automatisch zijn genummerd met “Section 1:”, “Section 2:”, enzovoort.
