@counter-style-Generator
Eigene Listen-Nummerierungen mit @counter-style bauen: Symbole, System, Präfix und Suffix – plus Galerie aller list-style-type-Werte.
Der @counter-style-Generator baut eigene Aufzählungszeichen und Nummerierungen für Listen. Du wählst das Zählsystem, Symbole wie Emojis oder Kreiszahlen, Präfix, Suffix und Auffüllung auf feste Stellen. Die Vorschau zeigt die Liste live. Dazu gibt es eine Galerie aller eingebauten list-style-type-Werte zum Vergleichen.
@counter-style daumen {
system: cyclic;
symbols: "👍";
suffix: " ";
}
ol.daumen {
list-style: daumen;
}Eingebaute list-style-type-Werte
decimal
- Eins
- Zwei
- Drei
decimal-leading-zero
- Eins
- Zwei
- Drei
lower-roman
- Eins
- Zwei
- Drei
upper-roman
- Eins
- Zwei
- Drei
lower-alpha
- Eins
- Zwei
- Drei
upper-alpha
- Eins
- Zwei
- Drei
lower-greek
- Eins
- Zwei
- Drei
disc
- Eins
- Zwei
- Drei
circle
- Eins
- Zwei
- Drei
square
- Eins
- Zwei
- Drei
disclosure-closed
- Eins
- Zwei
- Drei
disclosure-open
- Eins
- Zwei
- Drei
armenian
- Eins
- Zwei
- Drei
georgian
- Eins
- Zwei
- Drei
hebrew
- Eins
- Zwei
- Drei
cjk-decimal
- Eins
- Zwei
- Drei
hiragana
- Eins
- Zwei
- Drei
katakana
- Eins
- Zwei
- Drei
arabic-indic
- Eins
- Zwei
- Drei
devanagari
- Eins
- Zwei
- Drei
thai
- Eins
- Zwei
- Drei
japanese-informal
- Eins
- Zwei
- Drei
korean-hangul-formal
- Eins
- Zwei
- Drei
ethiopic-numeric
- Eins
- Zwei
- Drei
Aufbau einer @counter-style-Regel
| Deskriptor | Bedeutung |
|---|---|
system | Wie gezählt wird |
symbols | Die verwendeten Zeichen |
additive-symbols | Wert-Zeichen-Paare für additive |
prefix / suffix | Text vor und nach der Zahl |
pad | Auffüllen auf eine Mindestzahl an Stellen |
fallback | Stil, wenn das eigene System nicht reicht |
Welche Elemente eine Liste genau trifft, zeigt der nth-child-Tester.
Häufige Fragen
Wann brauche ich @counter-style statt ::marker?
::marker gestaltet das vorhandene Aufzählungszeichen (Farbe, Größe, Schrift). @counter-style legt fest, welche Zeichen überhaupt verwendet werden und wie gezählt wird, etwa mit Emojis, eigenen Ziffern oder Klammern.
Was bedeuten die Zählsysteme?
cyclic wiederholt die Symbole, numeric zählt wie im Dezimalsystem mit den angegebenen Ziffern, alphabetic wie a, b … z, aa, symbolic verdoppelt Zeichen (*, **), additive addiert Werte wie bei römischen Zahlen, fixed nutzt eine feste Liste und danach den Fallback.
Wird @counter-style überall unterstützt?
Ja, seit Safari 17 unterstützen alle großen Browser @counter-style. Ältere Browser zeigen die normale Nummerierung, die Liste bleibt also lesbar.
Lesen Screenreader die Symbole vor?
Häufig ja, Emojis werden dann mit ihrem Namen vorgelesen. Mit der Eigenschaft speak-as lässt sich das steuern; bei rein dekorativen Symbolen ist speak-as: bullets eine gute Wahl.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.