Benutzerdefinierte Aufzählungszeichen mit CSS ::marker

Adam Argyle

Oriol Brufau

Veröffentlicht am 2. September 2020

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

Einführung in Pseudoelemente

Ein Pseudoelement stellt einen Teil im Dokument dar, der nicht im Dokumentbaum dargestellt wird. Sie können beispielsweise die erste Zeile eines Absatzes mit dem Pseudoelement p::first-line auswählen, obwohl es kein HTML-Element gibt, das diese Textzeile umschließt.

Betrachten Sie die folgende ungeordnete 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>

Mit der Standardformatierung wird sie so gerendert:

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

Die Markierungsbox des Pseudoelements ::marker wird automatisch in jedem Listenelement vor dem eigentlichen Inhalt und dem Pseudoelement ::before generiert.

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 aber 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;
}

Markierung formatieren

Bevor ::marker verfügbar war, konnten Sie Listen mit list-style-type und list-style-image formatieren, um das Listensymbol 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 Markierungs-Pseudoelemente einzeln oder global in Ihrem CSS ausrichten:

li::marker {
  color: hotpink;
}

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

::marker bietet Ihnen viel mehr Kontrolle über Markierungsstile als list-style-type, funktioniert aber nicht mit jeder CSS-Eigenschaft. Folgende Eigenschaften sind zulässig:

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

Ändern Sie den Inhalt von ::marker mit content und nicht mit list-style-type. Im nächsten Beispiel sehen Sie, wie die Eigenschaften von list-style-type auf das gesamte Listenelement angewendet werden und wie Sie mit ::marker nur die Markierungsbox ausrichten können. Die Eigenschaft 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 Formatierung von Markierungen.

Alle Listenelemente ändern

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

/* OR */

li::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>");
}

Geordnete Listen ändern

Was ist mit <ol>? Die Markierung eines geordneten Listenelements ist standardmäßig eine Zahl, kein Punkt oder Aufzählungszeichen. In CSS werden diese als Zählerbezeichnet, und 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 können. Sie können ::marker auch verwenden, um Zähler zu formatieren, und sogar den Wert für den Markierungsinhalt verwenden, um Ihre eigene Nummerierung zu erstellen.

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

Fehlerbehebung

Mit den Chrome-Entwicklertools können Sie die Stile, die Sie auf ::marker-Pseudoelemente anwenden, untersuchen, debuggen und ändern.

Ressourcen

Weitere Informationen zu ::marker finden Sie hier:

• CSS Lists, Markers and Counters from Smashing Magazine
• Counting With CSS Counters and CSS Grid from CSS-Tricks
• Using CSS Counters from MDN