CSS-Zähler-Generator Erstellen Sie CSS-Zähler für benutzerdefinierte nummerierte Listen mit verschiedenen Stilen und Schachtelungen.

CSS-Zähler verwenden drei Haupt-Eigenschaften: counter-reset initialisiert einen Zähler in einem Elternelement, counter-increment erhöht den Zähler in Kinderelementen und die content-Eigenschaft mit counter() oder counters() zeigt den Wert an. Die counter-reset-Eigenschaft erstellt eine neue Zählerinstanz: counter-reset: section. counter-increment erhöht sie: counter-increment: section. Die content-Eigenschaft auf einem ::before-Pseudo-Element zeigt den Zähler an: content: counter(section). Die counter()-Funktion akzeptiert ein optionalen Stilargument: counter(section, upper-roman). Für verschachtelte Zähler wird jeder Level seinen eigenen Teilzähler zurücksetzen. Die counters()-Funktion (beachten Sie das 's') behandelt verschachtelte Bereiche: counters(section, ".") ergibt eine Notation wie "1.2.3". Verfügbare list-style-types umfassen decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman, lower-greek und mehr. Mehrere Zähler können definiert und unabhängig voneinander verwendet werden.