Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >list-style-type

list-style-type

list-style-type: disc | circle | square | decimal | lower-alpha | upper-roman | none | "Text" | …

Legt fest, womit Listenpunkte markiert werden – mit einem Punkt, einem Quadrat, einer Zahl, einem Buchstaben, einer römischen Ziffer oder eigenem Text. Gesetzt wird sie an ul oder ol; die Listenpunkte erben sie. Der Typ hängt nicht vom Tag ab: Eine ul kann Zahlen haben und eine ol Punkte.

Werte

  • disc, circle, square – ein gefüllter Kreis, ein leerer Kreis, ein Quadrat.
  • decimal – 1, 2, 3; decimal-leading-zero – 01, 02, 03.
  • lower-alpha / upper-alpha – a, b, c / A, B, C (das englische Alphabet, ohne Umlaute).
  • lower-roman / upper-roman – i, ii, iii / I, II, III.
  • lower-greek – α, β, γ.
  • disclosure-closed / disclosure-open – ein kleines Dreieck wie bei details.
  • "✓ " – eigener Text; Chrome ab 79, Firefox ab 39, Safari ab 14.1.
  • none – keine Markierung.

Initialwert: disc (eine ol-Liste hat vom Browser decimal). Vererbt: ja. Gilt für: Listenpunkte (display: list-item).

Beispiele

Eine Gliederung: die Hauptpunkte mit römischen Ziffern, die verschachtelten mit Kleinbuchstaben:

<ol class="outline">
  <li>Einleitung
    <ol>
      <li>Ziel</li>
      <li>Methode</li>
    </ol>
  </li>
  <li>Fazit</li>
</ol>

.outline { list-style-type: upper-roman; }
.outline ol { list-style-type: lower-alpha; }
Ergebnis
  1. Einleitung
    1. Ziel
    2. Methode
  2. Fazit

Ein eigenes Zeichen statt eines Punkts – das Leerzeichen danach muss in den Text geschrieben werden:

<ul class="done">
  <li>Bestellung eingegangen</li>
  <li>Ware versendet</li>
</ul>

.done { list-style-type: "✓ "; }
Ergebnis
  • Bestellung eingegangen
  • Ware versendet

Worauf Sie achten sollten

  • Eine verschachtelte ul bekommt vom Browser einen anderen Typ: die zweite Ebene circle, die dritte und tiefere square. Wollen Sie überall dasselbe Zeichen, setzen Sie es auch an den verschachtelten Listen.
  • Eigener Text wird so geschrieben, wie er ist – ein Leerzeichen zwischen dem Zeichen und dem Text des Listenpunkts kommt nicht von selbst dazu.
  • Farbe und Größe des Aufzählungszeichens setzt ::marker, nicht diese Eigenschaft.
  • Eine Nummerierung ab einer anderen Zahl erreichen Sie mit dem Attribut start von ol (<ol start="5">), die umgekehrte Reihenfolge mit dem Attribut reversed.

Browserunterstützung

Baseline – weithin verfügbar: funktioniert in allen gängigen Browsern, und das schon lange (spätestens seit 2015). Ab Version: Chrome 1, Firefox 1, Safari 1. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
list-style
list-style-position
::marker
counter() und counters()
counter-reset