CSS-Zähler sind eine ausgezeichnete Möglichkeit, um automatisch nummerierte Überschriften, Zeilen in einer Tabelle oder ein anderes Element auf einer Webseite zu erstellen. Hier ist, wie man es verwendet:
Schritt 1: Beginnen Sie damit, den Zähler in Ihrem CSS zu initialisieren. Normalerweise möchten Sie dies in der CSS-Regel für den Container des Elements tun, das Sie zählen möchten.
```
body {
counter-reset: abschnitt;
}
```
In diesem Beispiel haben wir einen Zähler namens “abschnitt” initialisiert.
Schritt 2: Anschließend müssen Sie den Zähler für jedes Element, das Sie zählen möchten, inkrementieren.
```
h1 {
counter-increment: abschnitt;
}
```
In diesem Beispiel inkrementieren wir den Zähler jedes Mal, wenn ein `
Schritt 3: Jetzt können Sie die aktuelle Zählerzahl in Ihrem Element anzeigen.
```
h1:before {
content: “Abschnitt “ counter(abschnitt) “. “;
}
```
In diesem Beispiel fügen wir vor jedem `
CSS-Zähler sind sehr flexibel und können für eine Vielzahl von Anwendungen verwendet werden. Sie können so viele verschiedene Zähler haben, wie Sie möchten, und sie sind auch verschachtelbar. Das bedeutet, dass Sie innerhalb eines Zählers einen weiteren Zähler starten können, um eine Unterebene zu erzeugen.
