Benutzerdefinierte Aufzählungszeichen mit CSS ::marker

Adam Argyle
Oriol Brufau
Oriol Brufau
GitHub

Unterstützte Browser

  • Chrome: 86
  • Edge: 86.
  • Firefox: 68
  • Safari: 11.1

Quelle

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

Beispiele für Aufzählungszeichen-Stile Quelltext anzeigen

Einführung in Pseudoelemente

Ein Pseudoelement stellt einen Teil des Dokuments dar, der nicht im Dokumentstruktur. Sie können beispielsweise die erste Zeile eines Absatzes mit das Pseudoelement p::first-line, obwohl es kein HTML-Element-Wrapping gibt. diese Textzeile ein.

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>

Wird mit Standardstilen wie folgt 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 darstellt, oder die Zahl am Anfang eines geordneten list.

Markierung erstellen

Das Pseudoelement-Markierungsfeld ::marker wird automatisch in jedem vor dem eigentlichen Inhalt und dem ::before-Element ein Pseudoelement.

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

Markierung gestalten

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

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

::marker bietet die Möglichkeit, Farbe, Größe und Abstand von Markierungen zu ändern, können Sie Pseudoelemente von Markierungen einzeln oder global in Ihrem CSS ausrichten:

li::marker {
  color: hotpink;
}

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

Mit ::marker haben Sie weitaus mehr Kontrolle über Markierungsstile als mit list-style-type. aber nicht mit jeder CSS-Eigenschaft. Folgende Attribute 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. Die Das nächste Beispiel zeigt, wie sich die Attribute von list-style-type auf das gesamte Listenelement. Mit ::marker können Sie das Targeting nur auf das Markierungsfeld festlegen. Das background Property funktioniert mit list-style-type, aber nicht mit ::marker.

Stile auflisten
li:nth-child(1) {
  list-style-type: '?';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}
Der Listenstil wirkt sich auf das gesamte Listenelement aus.
Marker-Formate
li:nth-child(2)::marker {
  content: '!';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}
Mit dem Markierungsstil können Sie den Fokus auf die Markierung legen.


Inhalt einer Markierung ändern

Im Folgenden finden Sie einige Beispiele für Möglichkeiten zum Gestalten von Markierungen.

Alle Listenelemente ä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 auf einem sortierten Listenelement ist eine Zahl und kein Punkt oder Aufzählungszeichen. In CSS werden diese Elemente als Zähler und Eigenschaften haben, die an der Stelle, an der die Zahl beginnt und endet, festgelegt oder zurückgesetzt werden können, oder z. B. römische Ziffern. Mit ::marker kannst du Stile festlegen Zähler hinzufügen und mithilfe des Werts für den Markierungsinhalt eine eigene Nummerierung erstellen zu präsentieren.

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.

Entwicklertools werden geöffnet und zeigen Stile des User-Agents und Benutzerstile
DevTools-Beschreibungen von Markierungsstilen

Ressourcen

Weitere Informationen zu ::marker finden Sie hier: