Benutzerdefinierte Aufzählungszeichen mit CSS ::marker

Adam Argyle
Oriol Brufau
Oriol Brufau
GitHub

Unterstützte Browser

  • 86
  • 86
  • 68
  • 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 Stile von Aufzählungszeichen. Quelle anzeigen

Einführung in Pseudoelemente

Ein Pseudoelement stellt einen Teil im Dokument dar, der nicht in der Dokumentstruktur enthalten ist. Sie können beispielsweise die erste Zeile eines Absatzes mit dem Pseudoelement p::first-line auswählen, auch wenn diese Textzeile ohne HTML-Element umschlossen wird.

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>

Was wird mit dem Standardstil 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 sortierten Listenelements darstellt.

Markierung erstellen

Das Feld für die Pseudoelementmarkierung ::marker wird automatisch in jedem Listenelementelement generiert, und zwar vor dem eigentlichen Inhalt und dem Pseudoelement ::before.

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

Listenelemente sind normalerweise <li>-HTML-Elemente, aber Sie können display: list-item verwenden, um andere Elemente in Listenelemente umzuwandeln.

<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 für Markierung festlegen

Bevor ::marker verfügbar wurde, konnten Sie Listen mit list-style-type und list-style-image gestalten, 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-Code einzeln oder global auf Pseudoelemente von Markierungen ausrichten:

li::marker {
  color: hotpink;
}

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

Mit ::marker haben Sie wesentlich mehr Kontrolle über Markierungsstile als list-style-type, funktioniert jedoch nicht mit jeder CSS-Eigenschaft. Folgende Attribute sind zulässig:

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

Ändern Sie den Inhalt von ::marker mithilfe von content, 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 mit ::marker das Targeting nur auf das Markierungsfeld erfolgt. Das Attribut background 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 betrifft das gesamte Listenelement.
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 Stil von Markierungen können Sie den Fokus auf die Markierung legen.


Inhalt einer Markierung ändern

Im Folgenden finden Sie einige Beispiele dafür, wie Sie Markierungen gestalten können.

Alle Listeneinträge ändern

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

/* OR */

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

Nur ein Listenelement ä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

Wie sieht es jedoch mit einem <ol> aus? Die Markierung für einen sortierten Listeneintrag ist standardmäßig eine Zahl und kein Punkt oder Aufzählungspunkt. In CSS werden diese als Zähler bezeichnet. Sie haben Eigenschaften, mit denen der Beginn und das Ende der Zahl festgelegt oder zurückgesetzt werden können. Sie können die Zähler auch beispielsweise in römische Ziffern umwandeln. Mit ::marker können Sie auch Zähler gestalten und mit dem Wert für den Markierungsinhalt sogar Ihre eigene Nummerierungspräsentation erstellen.

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

Debuggen

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

Die Entwicklertools werden geöffnet und zeigen Stile des User-Agents und der Nutzerstile an.
Die Entwicklertools – Beschreibungen der Markierungsstile.

Ressourcen

Weitere Informationen zu ::marker finden Sie hier: