list-style & ::marker

Zuletzt aktualisiert am 15. Februar 2026

list-style ist die Shorthand-Eigenschaft für das Erscheinungsbild von Listenpunkten. Sie fasst list-style-type, list-style-position und list-style-image zusammen. Mit list-style-type bestimmst du die Art des Aufzählungszeichens (Punkt, Kreis, Nummer), mit list-style-position ob es innerhalb oder außerhalb des Textflusses sitzt, und mit list-style-image kannst du ein eigenes Bild verwenden. Zusätzlich bietet das ::marker Pseudo-Element noch feinere Kontrolle über Farbe, Größe und Inhalt der Aufzählungszeichen.

Grundlagen

list-style wirkt auf Elemente mit display: list-item, also standardmäßig auf <li>, <ul> und <ol>. Wenn du list-style auf ein <ul> oder <ol> setzt, wird die Eigenschaft an die <li>-Kindelemente vererbt.

Die häufigste Verwendung ist list-style: none, um Listenpunkte für Navigationsmenüs und andere nicht-dekorative Listen zu entfernen. Beachte dabei, dass das allein nicht das Standard-Padding der Liste entfernt. Dafür brauchst du zusätzlich padding: 0.

Das ::marker Pseudo-Element erlaubt dir seit einigen Jahren, Aufzählungszeichen direkt zu stylen, ohne auf ::before und content zurückgreifen zu müssen. Du kannst damit Farbe, Schriftgröße und sogar den Inhalt des Markers ändern. Bei <ol> hast du Zugriff auf die automatisch generierte Nummer.

Syntax & Werte

list-style-type

list-style-position

list-style-image

Beispiele

Marker-Typen im Überblick

Die verschiedenen list-style-type-Werte im direkten Vergleich.

ul.punkte  { list-style-type: disc; }
ul.kreise  { list-style-type: circle; }
ul.quadrate { list-style-type: square; }
ol.zahlen  { list-style-type: decimal; }
ol.roemisch { list-style-type: upper-roman; }
ol.buchstaben { list-style-type: lower-alpha; }

<div class="ls-demo">
<div>
  <h4>disc</h4>
  <ul class="ls-disc"><li>Äpfel</li><li>Birnen</li><li>Kirschen</li></ul>
</div>
<div>
  <h4>circle</h4>
  <ul class="ls-circle"><li>Äpfel</li><li>Birnen</li><li>Kirschen</li></ul>
</div>
<div>
  <h4>square</h4>
  <ul class="ls-square"><li>Äpfel</li><li>Birnen</li><li>Kirschen</li></ul>
</div>
<div>
  <h4>decimal</h4>
  <ol class="ls-decimal"><li>Äpfel</li><li>Birnen</li><li>Kirschen</li></ol>
</div>
<div>
  <h4>upper-roman</h4>
  <ol class="ls-roman"><li>Äpfel</li><li>Birnen</li><li>Kirschen</li></ol>
</div>
<div>
  <h4>lower-alpha</h4>
  <ol class="ls-alpha"><li>Äpfel</li><li>Birnen</li><li>Kirschen</li></ol>
</div>
</div>

Position: inside vs. outside

Der Unterschied zwischen inside und outside wird sichtbar, wenn Listeneinträge mehrzeilig sind. Bei outside (Standard) rückt der Text unter der ersten Zeile ein, bei inside umfließt er den Marker.

/* Standard: Marker steht links vom Textblock */
ul { list-style-position: outside; }

/* Marker sitzt im Textfluss */
ul { list-style-position: inside; }

<div class="pos-demo">
<div>
  <h4>outside (Standard)</h4>
  <ul class="pos-outside">
    <li>Erster Eintrag mit etwas längerem Text, der in die zweite Zeile umbricht</li>
    <li>Kurzer Eintrag</li>
    <li>Noch ein längerer Eintrag, um den Unterschied deutlich zu machen</li>
  </ul>
</div>
<div>
  <h4>inside</h4>
  <ul class="pos-inside">
    <li>Erster Eintrag mit etwas längerem Text, der in die zweite Zeile umbricht</li>
    <li>Kurzer Eintrag</li>
    <li>Noch ein längerer Eintrag, um den Unterschied deutlich zu machen</li>
  </ul>
</div>
</div>

Eigenes Aufzählungszeichen mit String

Seit CSS3 kannst du einen beliebigen String als list-style-type verwenden. Das eignet sich für Emojis oder einfache Sonderzeichen.

.todo    { list-style-type: "👉 "; }
.schritte { list-style-type: "→ "; }
.erledigt { list-style-type: "✓ "; }
.favoriten { list-style-type: "⭐ "; }

<div class="str-demo">
<div>
  <h4>Finger</h4>
  <ul class="ls-finger"><li>HTML lernen</li><li>CSS lernen</li><li>JavaScript lernen</li></ul>
</div>
<div>
  <h4>Pfeil</h4>
  <ul class="ls-arrow"><li>HTML lernen</li><li>CSS lernen</li><li>JavaScript lernen</li></ul>
</div>
<div>
  <h4>Häkchen</h4>
  <ul class="ls-check"><li>HTML lernen</li><li>CSS lernen</li><li>JavaScript lernen</li></ul>
</div>
<div>
  <h4>Stern</h4>
  <ul class="ls-star"><li>HTML lernen</li><li>CSS lernen</li><li>JavaScript lernen</li></ul>
</div>
</div>

::marker Pseudo-Element

Mit ::marker kannst du das Aufzählungszeichen direkt stylen, ohne auf Workarounds mit ::before zurückzugreifen. Du kannst Farbe, Schriftgröße, Schriftstärke und content ändern.

/* Farbe und Gewicht ändern */
li::marker {
  color: #3b82f6;
  font-weight: 700;
}

/* Eigenen Inhalt setzen */
li::marker {
  content: "§ ";
  color: #7c3aed;
}

/* Nummerierte Liste stylen */
ol li::marker {
  color: #dc2626;
  font-weight: 700;
  font-size: 1.1em;
}

<div class="marker-demo">
<div>
  <h4>Farbe & Gewicht</h4>
  <ul class="mk-color"><li>Eintrag A</li><li>Eintrag B</li><li>Eintrag C</li></ul>
</div>
<div>
  <h4>Größe</h4>
  <ul class="mk-size"><li>Eintrag A</li><li>Eintrag B</li><li>Eintrag C</li></ul>
</div>
<div>
  <h4>Custom content</h4>
  <ul class="mk-content"><li>Eintrag A</li><li>Eintrag B</li><li>Eintrag C</li></ul>
</div>
<div>
  <h4>ol mit ::marker</h4>
  <ol class="mk-ol"><li>Schritt eins</li><li>Schritt zwei</li><li>Schritt drei</li></ol>
</div>
</div>

Navigation ohne Listenpunkte

Das häufigste Pattern: Eine <ul> als Navigation verwenden, Listenpunkte entfernen und horizontal anordnen.

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;     /* Wichtig: Standard-Padding entfernen */
  display: flex;
  gap: 4px;
}

nav a {
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 6px;
}

<div class="nav-demo">
<nav>
  <ul>
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Docs</a></li>
    <li><a href="#">Kurse</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</nav>
</div>

Barrierefreiheit

Safari entfernt bei list-style: none die Listensemantik im Accessibility-Tree. Das bedeutet, dass Screenreader die Liste nicht mehr als Liste ankündigen und auch nicht die Anzahl der Einträge vorlesen. Wenn die Listensemantik wichtig ist (z.B. bei einer Aufzählung von Inhalten), füge role="list" auf dem <ul> oder <ol> hinzu. Für Navigationsmenüs ist das weniger kritisch, weil dort ohnehin ein <nav>-Element die Semantik liefert.

Wenn du ::marker mit content verwendest, beachte, dass Screenreader den Marker-Content vorlesen können. Ein dekoratives Emoji als content: "🔥 " wird möglicherweise als “Feuer” vorgelesen, was verwirrend sein kann. Für rein dekorative Marker setze content nur, wenn es den Inhalt nicht stört, oder verwende stattdessen list-style-type mit einem String-Wert.

Listen vermitteln Struktur: Nutzer von Screenreadern können mit Tastenkombinationen direkt zur nächsten Liste springen und erfahren die Anzahl der Einträge. Verwende <ul> und <ol> also nur für tatsächliche Listen und nicht als allgemeines Container-Element.

Häufige Fehler

• list-style: none ohne padding: 0: Das Standard-Padding der Liste bleibt erhalten und erzeugt einen unerwarteten Einzug. Setze immer auch padding: 0 (und margin: 0), wenn du Listenpunkte entfernst.
• list-style-image statt ::marker oder ::before für Bilder: list-style-image bietet keine Kontrolle über Größe und Position des Bildes. Besser: ::marker { content: url(icon.svg); } oder ::before mit background-image und kontrollierten Dimensionen.
• list-style-type und ::marker { content } gleichzeitig: Wenn du content auf ::marker setzt, überschreibt es den list-style-type komplett. Setze also entweder das eine oder das andere.
• Vererbung nicht beachten: list-style wird vererbt. Wenn du es auf einem <ul> setzt, gilt es für alle verschachtelten Listen darin. Setze es gezielt auf die gewünschte Verschachtelungsebene.
• Safari-Bug bei list-style: none ignorieren: In Safari verliert eine Liste mit list-style: none ihre Semantik. Füge role="list" hinzu, wenn die Listensemantik erhalten bleiben soll.

Browser-Kompatibilität

list-style und alle Sub-Properties werden von allen Browsern vollständig unterstützt. ::marker wird seit 2021 von allen modernen Browsern unterstützt, allerdings mit eingeschränkten stylebaren Eigenschaften (color, font-size, content).

Email-Kompatibilität

list-style-type funktioniert in den meisten Email-Clients. list-style-image und ::marker werden kaum unterstützt.

Verwandte Eigenschaften