CSS- teller() Functie
Voorbeeld
Maak een teller voor de pagina (in de body-selector). Verhoog de tellerwaarde voor elk <h2>-element en voeg de tekst "Sectie < waarde van de teller >:" toe voor elk <h2>-element:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De functie counter() retourneert de huidige waarde van de benoemde teller als een tekenreeks.
Versie: | CSS3 |
---|
Browserondersteuning
Function | |||||
---|---|---|---|---|---|
counter() | Yes | Yes | Yes | Yes | Yes |
CSS-syntaxis
counter(countername,
counterstyle)
Value | Description |
---|---|
countername | Required. The name of the counter (which is the same name used for the counter-reset and counter-increment properties) |
counterstyle | Optional. The style of the counter (can be a list-style-type value) |
Meer voorbeelden
Voorbeeld
Stel de stijl van de teller in:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section,
upper-roman) ": ";
}
Gerelateerde pagina's
CSS-referentie: inhoudseigenschap
CSS-referentie: eigenschap counter-increment
CSS -referentie: eigenschap tegenreset