CSS counter ist ein CSS-Feature, das verwendet wird, um eine Zähl-Anzahl zu Inhaltsabschnitten hinzuzufügen oder eine Nummerierung zu erstellen. Das ist sehr nützlich bei Erstellung von Automatischer Nummerierung in großen Dokumenten wie Tutorials, Rezepten oder Anleitungen.
Um CSS counters zu verwenden, benötigst du drei CSS-Eigenschaften: `counter-reset`, `counter-increment`, und `content`.
Folgende Schritte zeigen, wie man diese CSS-Eigenschaften verwendet:
Step 1: Definiere den Counter
Du kannst die `counter-reset` Eigenschaft verwenden, um einen oder mehrere Counter zu erstellen und zu initialisieren:
```css
body {
counter-reset: abschnitt; /* Startwert des Counters ist 0 */
}
```
In diesem Fall haben wir einen Counter mit dem Namen “abschnitt” erstellt.
Step 2: Den Counter erhöhen
Mit `counter-increment` wird der Wert des Counters erhöht:
```css
h3 {
counter-increment: abschnitt; /* Den Wert des Counters um 1 erhöhen */
}
```
In diesem Beispiel wird der Counter “abschnitt” jedes Mal um 1 erhöht, wenn ein neuer `h3`-Tag im Dokument gefunden wird.
Step 3: Den Counter anzeigen
Mit der `content` Eigenschaft wird der aktuelle Wert des Counters auf dem Bildschirm angezeigt:
```css
h3::before {
content: “Abschnitt “ counter(abschnitt) “: “;
}
```
In diesem Beispiel wird vor jedem `h3`-Tag “Abschnitt x:” angezeigt, wobei “x” der aktuelle Wert des Counters “abschnitt” ist.
Hinweis: Counter sind nicht speziell auf irgendwelche Elemente beschränkt und können auf verschiedene Arten und mit verschiedenen Zähl-Logiken verwendet werden. Die oben genannten Anweisungen sind nur grundlegende Beispiele, wie du CSS-Counter verwenden kannst. Du kannst auch mehrere Counter verwenden, den Counter um mehr als 1 erhöhen, den Counter rückwärts zählen lassen usw.
