CSS counter() functie

Definitie en gebruik

counter() De functie retourneert de huidige waarde van de specifieke teller als string.

Voorbeeld

Voorbeeld 1

Maak een teller voor de pagina aan (in de selector body). Voeg de waarde van de teller toe aan elke <h2> element en voeg voor elke <h2> element de tekst 'Hoofdstuk X' toe:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Sectie " counter(section) ": ";
}

Probeer het zelf uit

Voorbeeld 2

Stel de stijl van de teller in:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Sectie " counter(section, upper-roman) ": ";
}

Probeer het zelf uit

CSS syntaxis

counter(countername, counterstyle)
Waarde Beschrijving
countername

Verplicht. Naam van de teller (dezelfde naam als in de properties counter-reset en counter-increment).

Let op, namen zijn hoofdlettergevoelig.

counterstyle

Optioneel. Stijl van teller (kan een waarde van list-style-type, een naam van @counter-style of de functie symbols() zijn).

Standaardwaarde is decimaal.

Technische details

Versie: CSS3

Browser ondersteuning

Chrome Edge Firefox Safari Opera
Ondersteuning Ondersteuning Ondersteuning Ondersteuning Ondersteuning

Gerelateerde pagina's

Tutorial:CSS teller

Referentie:CSS content eigenschap

Referentie:CSS teller-verhoog eigenschap

Referentie:CSS teller-herstel eigenschap

Referentie:CSS @counter-style regel

Referentie:CSS counters() functie