CSS- counter()- Funktion
Beispiel
Erstellen Sie einen Zähler für die Seite (in der Textauswahl). Erhöhen Sie den Zählerwert für jedes <h2>-Element und fügen Sie vor jedem <h2>-Element den Text „Section < value of the counter >:“ hinzu:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die Funktion counter() gibt den aktuellen Wert des benannten Zählers als Zeichenfolge zurück.
Ausführung: | CSS3 |
---|
Browser-Unterstützung
Function | |||||
---|---|---|---|---|---|
counter() | Yes | Yes | Yes | Yes | Yes |
CSS-Syntax
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) |
Mehr Beispiele
Beispiel
Legen Sie den Stil des Zählers fest:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section,
upper-roman) ": ";
}
Verwandte Seiten
CSS-Referenz: Inhaltseigenschaft
CSS-Referenz: Counter-Increment-Eigenschaft
CSS-Referenz: Counter-Reset-Eigenschaft