Benutzerdefinierte Aufzählungszeichen mit CSS ::marker

Adam Argyle

Oriol Brufau

Mit CSS ::marker können Sie den Inhalt und einige der Stile von Aufzählungszeichen und Zahlen in HTML-Listen ändern.

Einführung in Pseudoelemente

Ein Pseudoelement stellt einen Teil des Dokuments dar, der nicht in der Dokumentstruktur dargestellt wird. So können Sie beispielsweise die erste Zeile eines Absatzes mit dem Pseudo-Element p::first-line auswählen, auch wenn es kein HTML-Element gibt, das diese Textzeile umbricht.

Betrachten Sie die folgende unsortierte HTML-Liste:

<ul>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
  <li>Dolores quaerat illo totam porro</li>
  <li>Quidem aliquid perferendis voluptates</li>
  <li>Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit
      consequatur alias facilis rem</li>
  <li>Fuga</li>
</ul>

Das wird mit der Standardformatierung so dargestellt:

Der Punkt am Anfang jedes <ul>-Elements wird beim Rendern der Liste generiert und hat kein eigenes HTML-Element. ::marker ist ein Pseudoelement, das diesen Punkt oder die Zahl am Anfang eines geordneten Listenelements darstellt.

Markierung erstellen

Das Markierungsfeld für das Pseudo-Element ::marker wird automatisch in jedem Listenelement generiert, vor dem eigentlichen Inhalt und dem Pseudo-Element ::before.

li::before {
  content: "::before";
  background: lightgray;
  border-radius: 1ch;
  padding-inline: 1ch;
  margin-inline-end: 1ch;
}

Listenelemente sind normalerweise <li>-HTML-Elemente. Mit display: list-item können Sie jedoch andere Elemente in Listenelemente umwandeln.

<dl>
  <dt>Lorem</dt>
  <dd>Lorem ipsum dolor sit amet consectetur adipisicing elit</dd>
  <dd>Dolores quaerat illo totam porro</dd>

  <dt>Ipsum</dt>
  <dd>Quidem aliquid perferendis voluptates</dd>
</dl>

dd {
  display: list-item;
  list-style-type: "🤯";
  padding-inline-start: 1ch;
}

Stil einer Markierung festlegen

Bevor ::marker verfügbar war, konnten Sie Listen mit list-style-type und list-style-image formatieren, um das Symbol für Listenelemente zu ändern:

li {
  list-style-image: url(/right-arrow.svg);
  /* OR */
  list-style-type: '👉';
  padding-inline-start: 1ch;
}

Mit ::marker können Sie Farbe, Größe und Abstand von Markierungen ändern, indem Sie ein Targeting auf Pseudoelemente von Markierungen einzeln oder global in Ihrem CSS vornehmen lassen:

li::marker {
  color: hotpink;
}

li:first-child::marker {
  font-size: 5rem;
}

Mit ::marker haben Sie viel mehr Kontrolle über Markierungsstile als mit list-style-type. Es funktioniert jedoch nicht mit allen CSS-Properties. Folgende Properties sind zulässig:

• animation-*
• transition-*
• color
• direction
• font-*
• content
• unicode-bidi
• white-space

Ändern Sie den Inhalt eines ::marker mit content, nicht mit list-style-type. Im nächsten Beispiel wird gezeigt, wie sich die Eigenschaften von list-style-type auf das gesamte Listenelement beziehen und wie Sie mit ::marker nur das Markierungsfeld anvisieren können. Das Attribut background funktioniert mit list-style-type, aber nicht mit ::marker.

li:nth-child(1) {
  list-style-type: '?';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}

li:nth-child(2)::marker {
  content: '!';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}

Inhalt einer Markierung ändern

Hier sind einige Beispiele für die Gestaltung von Markierungen.

Alle Listeneinträge ändern

li {
  list-style-type: "😍";
}

/* OR */

li::marker {
  content: "😍";
}

Nur einen Listeneintrag ändern

li:last-child::marker {
  content: "😍";
}

Markierungen mit SVG definieren

li::marker {
  content: url(/heart.svg);
  content: url(#heart);
  content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
}

Sortierte Listen ändern

Was ist aber mit einem <ol>? Die Markierung für ein Element einer sortierten Liste ist standardmäßig eine Zahl, kein Punkt oder Aufzählungspunkt. In CSS werden sie als Zähler bezeichnet. Sie haben Eigenschaften, mit denen Sie festlegen oder zurücksetzen können, wo die Zahl beginnt und endet, oder sie beispielsweise in römische Ziffern umwandeln. Mit ::marker können Sie auch Zähler formatieren und sogar den Inhaltswert der Markierung verwenden, um eine eigene Nummerierung zu erstellen.

li::marker {
  content: counter(list-item) "› ";
  color: hotpink;
}

Fehlerbehebung

Mit den Chrome-Entwicklertools können Sie die Stile prüfen, beheben und ändern, die Sie auf ::marker-Pseudoelemente anwenden.

Ressourcen

Weitere Informationen zu ::marker finden Sie unter:

• CSS-Listen, Markierungen und Zähler von Smashing Magazine
• Mit CSS-Zählern und CSS-Raster zählen von CSS-Tricks
• CSS-Zähler verwenden von MDN