Listen: Das Wichtigste zum Gestalten von Aufzählungszeichen per CSS

In diesem Beitrag zeige ich Ihnen, wie Sie die Aufzählungszeichen von Listen per CSS gestalten können. Dazu lernen Sie zunächst die Voreinstellungen vom Browser-Stylesheet kennen und sehen, wie man diese mit der CSS-Eigenschaft list-style und dem Pseudoelement ::marker gestalten kann.

Inhaltsverzeichnis

• Das HTML für Listen: <ul>, <ol> und <li>
• Das Browser-Stylesheet gibt Listen eine grundlegende Gestaltung
  • Browser-Styles für Aufzählungen <ul>
  • Browser-Styles für die Listenelemente <li>
• Aufzählungszeichen gestalten mit »list-style-type« & Co.
  • Die Keywords für »list-style-type«
  • Andere Aufzählungszeichen bei »list-style-type« als Unicode eingeben
  • Die Eigenschaften »list-style-image« und »list-style-position«
  • Das Aufzählungszeichen mit »list-style-position« linksbündig positionieren
• Aufzählungszeichen getrennt gestalten mit ::marker
• Weiterführende Links

Das HTML für Listen: <ul>, <ol> und <li>

Eine Aufzählung (engl. unorderd list) besteht in HTML aus zwei Elementen:

• <ul> und </ul> kennzeichnen Beginn und Ende der Aufzählung.
• <li> und </li> markieren die einzelne Aufzählungspunkte.

Das Kürzel ul steht für unordered list, zu Deutsch ungeordnete Liste. Das folgende Listing zeigt ein einfaches Beispiel:

<ul>
  <li>HTML strukturiert die Webseite und erstellt die Kästchen.</li>
  <li>CSS gestaltet die Kästchen und die Inhalte darin.</li>
</ul>

In diesem Beitrag geht es um Aufzählungen, aber eine Nummerierung (engl. ordered list) mit <ol> funktioniert genauso.

Das Browser-Stylesheet gibt Listen eine grundlegende Gestaltung

Die Browser-Stylesheets geben jeder Liste eine grundlegende Gestaltung mit auf den Weg.

Browser-Styles für Aufzählungen <ul>

Das umgebende ul-Element wird vom Browser-Stylesheet in allen modernen Browsern sinngemäß ungefähr so gestaltet:

ul {
  display: block; 
  list-style-type: disc; 
  padding-left: 40px; 
  margin: 1em 0; 
}

Die Eigenschaft list-style-type definiert das Aufzählungszeichen und padding-left:40px erzeugt links einen Einzug, in dem das Aufzählungszeichen dargestellt wird. Nummerierungen mit ol bekommen mit list-style-type:decimal eine Dezimalzahl als Aufzählungszeichen, funktionieren ansonsten aber genauso.

Browser-Styles für die Listenelemente <li>

Jeder Listenpunkt steht in einem li-Element, das von den Browser-Stylesheets eine ganz spezielle Anweisung bekommt:

li {
  display: list-item;
}

Das Besondere an display:list-item ist, dass es zwei Boxen erzeugt:

• eine Block-Box für den Inhalt des Listenelements
• eine Inline-Box für das Aufzählungszeichen, die vor dem Inhalt eingefügt wird

Die Aufzählungszeichen übernehmen die für das Listenelement berechnete Farbe. Mit dem weiter unten vorgestellten Pseudoelement ::marker kann man die Box mit den Aufzählungszeichen selektieren und getrennt vom Listenelement gestalten.

Die folgende Abbildung zeigt eine Liste mit HTML und dem CSS für ul vom Browser-Stylesheet. Mit im Bild ist auch ::marker.

Aufzählungszeichen gestalten mit »list-style-type« & Co.

Es gibt mit list-style-type, list-style-position und list-style-image drei Eigenschaften zur Gestaltung von Listenelementen, die auch als Kurzschreibweise list-style notiert werden können.

Die Keywords für »list-style-type«

Zur Gestaltung des Aufzählungszeichens gibt es zunächst einmal einige Keywords:

• disc ist ein ausgefüllter Kreis.
• circle ist ein leerer Kreis.
• square ist ein ausgefülltes Quadrat.
• none erzeugt kein Aufzählungszeichen.

Für Nummerierungen ist die Auswahl definitiv größer (siehe Values für list-style-type beim MDN).

Andere Aufzählungszeichen bei »list-style-type« als Unicode eingeben

Man kann als Wert aber auch ein Unicode-Zeichen oder eine Zeichenfolge eingeben (siehe CodePen).

See the Pen by Peter Müller (@pmmueller) on CodePen.

Die Eigenschaften »list-style-image« und »list-style-position«

Es gibt noch zwei weitere Eigenschaften zur Gestaltung von Aufzählungszeichen:

• list-style-image ermöglicht die Einbindung einer Grafik als Aufzählungszeichen. Da man die Grafik aber nicht am Text ausrichten kann, wird das eher selten genutzt.
• list-style-position bestimmt die Position der Box für das Aufzählungszeichen. Der Standardwert outside platziert die Box vor dem Inhalt, die Alternative inside innerhalb der Blockbox.

Wenn Sie die Kurzschreibweise list-style verwenden, werden alle nicht gelisteten Eigenschaften auf Ihren Standardwert gesetzt. Zum Nachschlagen gibt es Eintrag für list-style bei SelfHTML, mit Links zu den einzelnen Eigenschaften.

Das Aufzählungszeichen mit »list-style-position« linksbündig positionieren

Das folgende CSS nutzt list-style-position, um das Aufzählungszeichens am linken Textrand auszurichten:

ul { 
    padding-left: 0; 
    list-style-position: inside; 
} 

Diese Regel hebt das vom Browser-Stylesheet vorgegebene padding auf und positioniert das Aufzählungszeichen innerhalb des Listenelements. Damit ist das Aufzählungszeichen linksbündig mit dem Text darüber und darunter, jedenfalls solange nirgendwo ein anderer linker Abstand deklariert wurde.

Richtig sinnvoll ist das aber nur in Linklisten mit kurzen, auch auf mobilen Geräten einzeiligen Inhalten, denn der Text einer eventuellen zweiten Zeile beginnt ansonsten unterhalb des Aufzählungszeichens, was nicht so wahnsinnig toll aussieht.

Aufzählungszeichen getrennt gestalten mit ::marker

Die Aufzählungszeichen einer Liste werden in der CSS-Spezifikation als Marker bezeichnet. Die Inline-Box, die das Aufzählungszeichen enthält, wird dort entsprechend Marker-Box genannt.

Die Marker-Box steht ganz am Anfang, noch vor einem eventuellen ::before. Seit einiger Zeit kann man sie mit ::marker selektieren und getrennt vom Listenelement gestalten.

Der folgende CodePen zeigt eine Liste mit einem per color eingefärbten Aufzählungszeichen. Auch andere Eigenschaften zur Schriftgestaltung wie font-weight oder font-size funktionieren gut.

See the Pen Listen: Aufzählungszeichen gestalten mit ::marker by Peter Müller (@pmmueller) on CodePen.

Browser, die ::marker nicht verstehen, ignorieren die entsprechenden Anweisungen einfach, aber die Browserunterstützung für ::marker ist im August 2021 bereits ziemlich gut.

Weiterführende Links

Die folgenden Links erzählen ihnen noch mehr über die Gestaltung von Listen mit ::marker:

• Farbige Listenpunkte mit CSS ::marker
  Kulturbanause Jonas Hellwig zeigt unter anderem, wie man mit ::marker, content und counter()individuelle Nummerierungen erstellen kann.
• List Markers and String Styles
  Eric Meyer geht in seinem Beitrag auf css-tricks.com wie immer etwas mehr in die Tiefe.

Viel Spaß beim Gestalten der Aufzählungspunkte und Nummerierungen.