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 Pseudo-Element stellt einen Teil des Dokuments dar, der nicht im Dokumentenbaum enthalten ist. 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 Elements einer benannten Liste darstellt.

Markierung erstellen

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

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

Listenelemente sind in der Regel <li>-HTML-Elemente. Mit display: list-item können Sie jedoch auch 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 die Farbe, Größe und den Abstand von Markierungen ändern, indem Sie in Ihrem CSS einzelne oder globale Markierungs-Pseudoelemente anvisieren:

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 Zähler genannt. 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
• Counting With CSS Counters and CSS Grid von CSS-Tricks
• CSS-Zähler verwenden von MDN