Kreative Möglichkeiten zum Stylen von Listen mit CSS

Standard-Browser-Listen passen selten zu einem echten Design. Ob Sie ein Navigationsmenü, eine Schritt-für-Schritt-Anleitung oder eine Produktfeature-Liste erstellen – CSS-Listenstyling bietet Ihnen die Werkzeuge, um sie gezielt zu gestalten. Dieser Artikel behandelt die praktischsten, standardbasierten Techniken – von nativen Listeneigenschaften über CSS-Zähler bis hin zu benutzerdefinierten Markierungen – ohne die Barrierefreiheit zu beeinträchtigen.

Mit dem richtigen HTML-Listentyp beginnen

Bevor Sie CSS verwenden, wählen Sie das richtige Element:

• <ul> — ungeordnete Listen, bei denen die Reihenfolge keine Rolle spielt (Navigationsmenüs, Feature-Listen)
• <ol> — geordnete Listen, bei denen die Reihenfolge bedeutsam ist (Anleitungen, Rankings)
• <dl> — Definitionslisten, die Begriffe mit Definitionen paaren (Glossare, Metadaten)

Semantisches HTML ist hier wichtig. Screenreader geben Listentyp und Elementanzahl bekannt, was Nutzern hilft, den Kontext zu verstehen, bevor sie ein einzelnes Element lesen.

Die list-style-*-Eigenschaften: Ihr Ausgangspunkt

Die list-style-Kurzschreibweise bündelt drei Eigenschaften:

ul {
  list-style: square inside none;
  /* list-style-type | list-style-position | list-style-image */
}

list-style-position sollte klar verstanden werden:

• outside (Standard) — die Markierung sitzt im Margin, und der Text bleibt sauber ausgerichtet
• inside — die Markierung fließt mit dem Text, was bei mehrzeiligen Elementen zum Umbruch führt

list-style-image existiert, ist aber eingeschränkt – Sie können das Bild weder skalieren noch neu positionieren. Für benutzerdefinierte Bild-Bullets bietet Ihnen ein ::before-Pseudoelement mit background-image deutlich mehr Kontrolle.

Native Markierungen mit CSS ::marker stylen

Das ::marker-Pseudoelement ermöglicht es Ihnen, das eingebaute Aufzählungszeichen oder die Nummer direkt zu stylen – ohne zusätzliches Markup:

li::marker {
  color: deeppink;
  font-size: 1.2em;
  font-weight: bold;
}

Wichtige Einschränkung: ::marker unterstützt nur eine bestimmte Teilmenge von CSS-Eigenschaften: color, content, font-*, direction, unicode-bidi, white-space, text-combine-upright sowie Animations- und Transition-Eigenschaften. Sie können display, background, padding, margin oder Positionierung nicht anwenden. Betrachten Sie es als Text-Level-Styling-Hook, nicht als vollständiges Element.

Die Browser-Unterstützung für ::marker ist in aktuellen Browsern gut, aber prüfen Sie Ihre Ziel-Browser-Matrix. Es ist normalerweise die sauberste Option für einfache Farb- oder Schriftänderungen an nativen Markierungen.

Benutzerdefinierte Listen-Bullets mit ::before

Wenn ::marker nicht ausreicht – für Icon-artige Bullets, komplexe Ausrichtung oder Übergänge – verwenden Sie stattdessen ::before:

ul {
  list-style: none;
  padding-left: 0;
}

ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

ul li::before {
  content: "✓";
  color: green;
  flex-shrink: 0;
}

Barrierefreiheits-Hinweis: Das Setzen von list-style: none kann dazu führen, dass Safari/VoiceOver das Element nicht mehr als Liste erkennt. Wenn die Listensemantik bedeutsam ist, fügen Sie role="list" zum <ul> oder <ol> hinzu.

CSS-Zähler für gestylte geordnete Listen

CSS-Zähler geben Ihnen volle Kontrolle über die Nummerierungsformatierung – nützlich für gestylte geordnete Listen mit benutzerdefinierten Präfixen, Suffixen oder mehrstufiger Nummerierung:

ol {
  list-style: none;
  counter-reset: steps;
}

ol li {
  counter-increment: steps;
}

ol li::before {
  content: "Schritt " counter(steps) ". ";
  font-weight: bold;
  color: #333;
}

Verschachtelte Zähler

Für verschachtelte Listen gibt counters() (Plural) die vollständige Hierarchie aus:

ol {
  list-style: none;
  counter-reset: steps;
}

ol li {
  counter-increment: steps;
}

ol li::before {
  content: counters(steps, ".") " ";
}
/* Ausgabe: 1, 1.1, 1.2, 2, 2.1 */

Die counter-increment-Eigenschaft akzeptiert auch eine Schrittgröße: counter-increment: steps 2 erhöht jedes Mal um zwei.

Ein Hinweis zu @counter-style

Die @counter-style-At-Regel ermöglicht es Ihnen, völlig benutzerdefinierte Zählsysteme zu definieren – benutzerdefinierte Symbole, Alphabete oder zyklische Muster:

@counter-style thumbs {
  system: cyclic;
  symbols: "👍" "👎";
  suffix: " ";
}

ul {
  list-style-type: thumbs;
}

Mit Vorsicht verwenden. Die Browser-Unterstützung für @counter-style bleibt unvollständig – insbesondere Safari hat die Unterstützung erst in Version 17 hinzugefügt. Testen Sie immer in Ihren Ziel-Browsern und definieren Sie einen list-style-type-Fallback auf demselben Element, um eine würdevolle Degradierung zu gewährleisten.

Die richtige Herangehensweise wählen

Fazit

Gutes CSS-Listenstyling beginnt mit semantischem HTML und schichtet visuelle Verbesserungen darüber. Verwenden Sie ::marker für leichtgewichtige Farb- und Schriftänderungen, ::before, wenn Sie Layout-Kontrolle benötigen, und CSS-Zähler, wenn geordnete Listen benutzerdefinierte Nummerierung benötigen. Vermeiden Sie das Entfernen von Listensemantik, ohne sie über ARIA wiederherzustellen. Jede Technik hat einen klaren Anwendungsfall – wählen Sie diejenige, die zu Ihrem Design passt, ohne es zu verkomplizieren.

FAQs

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..