Listenzeichen mithilfe von CSS individuell gestalten

Im folgenden Blogartikel werde ich dir zeigen, wie du nur mit CSS, die Listenzeichen individuell gestalten kannst. Es ist kein Grafikprogramm notwendig.

In den letzten Jahren hat sich bei CSS sehr viel getan. Mit Flexbox und dem Grid-Modul sind wichtige Design- und Layout-Werkzeuge hinzugekommen, die es dir ermöglichen auch anspruchsvolle Layouts elegant und einfach umzusetzen. Diese beiden CSS-Module haben eine große Änderung in der Vorgehensweise beim Erstellen von Weblayouts bewirkt.

Aber auch im Kleinen hat sich viel getan und auf so eine kleine, aber feine Möglichkeit werde ich heute näher eingehen, und zwar auf die Möglichkeit, die Listenzeichen ganz individuell zu gestalten.

Listen mit CSS ansprechen

Viele von euch kennen bereits die CSS-Eigenschaft list-style-type. Damit kannst du ein wenig die Form der Aufzählungszeichen bestimmen – Kreis, Quadrat etc. – und bestimmen, ob die nummerierte Liste mit einer führenden Null beginnt oder ob statt den arabischen die römischen Zahlen genutzt werden sollen.

Nein, ich rede hier von einer anderen Möglichkeit, wo du direkt und ohne Umwege die Listenzeichen individuell an der Form und an Farben anpassen kannst.

Hier ein Beispiel. Zuerst der relevante Abschnitt in der HTML-Datei:

<div class="inhalt">
  <h1>Einkaufszettel</h1>
  <ul>
    <li>Butter</li>
    <li>Eier</li>
    <li>Fisch</li>
    <li>Milch</li>
  </ul>
  
  <h1>Coole Spiele</h1>
  <ul class="zocken">
    <li>Herr der Ringe Online</li>
    <li>Civilization V</li>
    <li>Gothic 1-3</li>
    <li>Games Dev Tycoon</li>
  </ul>
  
  <h1>Edelmetalle</h1>
  <ol>
    <li>Platin</li>
    <li>Gold</li>
    <li>Silber</li>
  </ol>
</div>

Der HTML-Code dürfte für viele bekannt sein. Innerhalb einer div-Box habe ich zwei Aufzählungslisten (<ul>) und eine nummerierte Liste (<ol>) untergebracht. Das Ergebnis ohne CSS schaut, wie du es dir gut vorstellen kannst, funktional, aber unspektakulär aus:

Mithilfe von wenig CSS-Code …

body {background: #07a; padding: 2%;}

.inhalt {background: #fff; color: #333; padding: 2%;}

h1 {font-size: 22px;}

ul li {line-height: 1.7;}

::marker {color: #07a;}
ul ::marker {font-size: 110%; content: "? ";}
ol ::marker {font: bold 140% 'comic sans ms', cursive;}
.zocken ::marker {content: "? ";}

… wird sich das schnell ändern und du bekommst die gestylten Listen, wie im Vorschaubild ganz oben zu sehen.

Und wie funktioniert das?

Das Pseudoelement ::marker ermöglicht dir, die Listenzeichen zielgerichtet zu beeinflussen. Du kannst das Listenzeichen gezielt ansprechen und ihm eine andere Farbe, eine andere Schriftart oder -Größe vergeben. In der Zeile 9 des CSS-Codes habe ich allen Listenzeichen eine blaue Farbe spendiert (#07a → #0077aa).

Du kannst aber die Listenzeichen auch durch ein Symbol oder Emoji ersetzen. Das habe ich in den Zeile 10 und 12 realisiert. In unserem Beispiel wählte ich Einkaufwagen-Emoji und Controller-Emoji. Du kannst sogar noch viel weiter gehen und hier auch noch CSS-Animationen und Transitionen einbauen.

Die Browser-Unterstützung für ::marker ist gut. Alle aktuellen Versionen von Firefox, Safari und den Chromium-Browsern (Chrome, Brave, Vivaldi, Opera, Edge) unterstützen dieses Pseudoelement.

Lediglich bei den Animationen und Transitionen scheinen Safari und Firefox für Android noch nicht mitzukommen.

Falls du dir das Beispiel live ansehen möchtest, so kannst du das auf der Code-Plattform CodePen anschauen.