Benutzerdefinierte Aufzählungszeichen mit CSS ::marker

Das Anpassen der Farbe, Größe oder Art der Zahl oder des Aufzählungszeichens ist jetzt einfach, wenn <ul> oder <ol> verwendet wird.

Adam Argyle
Oriol Brufau
Oriol Brufau
GitHub

Dank Igalia, die von Bloomberg gesponsert wird, können wir endlich unsere Tricks für Stillisten weglegen. Sieh!

Quelle ansehen

Dank CSS ::marker können wir den Inhalt und einige Stile für Aufzählungszeichen und Zahlen ändern.

Browserkompatibilität

::marker wird in Firefox für Desktop- und Android-Geräte, in Safari auf Computern und in iOS in Safari (aber nur in den Eigenschaften color und font-*, siehe Fehler 204163) sowie in Chromium-basierten Desktop- und Android-Browsern unterstützt.

Unterstützte Browser

  • 86
  • 86
  • 68
  • 11.1

Quelle

Pseudoelemente

Sehen Sie sich die folgende ungeordnete HTML-Liste an:

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

Dies führt zu folgendem nicht überraschenden Rendering:

Der Punkt am Anfang jedes <li>-Artikels ist kostenlos. Der Browser zeichnet und erstellt ein generiertes Markierungsfeld für Sie.

Heute möchten wir über das Pseudoelement ::marker sprechen, mit dem Sie das Aufzählungselement gestalten können, das Browser für Sie erstellen.

Markierung erstellen

Das Pseudoelement-Markierungsfeld ::marker wird automatisch in jedem Listenelementelement generiert, das dem eigentlichen Inhalt und dem Pseudoelement ::before vorangestellt ist.

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

In der Regel sind Listenelemente <li>-HTML-Elemente, aber andere Elemente können auch zu Listenelementen mit display: list-item werden.

<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

Bis zum ::marker konnten Listen mithilfe von list-style-type und list-style-image gestaltet werden, um das Symbol für Listeneinträge mit einer einzigen CSS-Zeile zu ändern:

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

Das ist praktisch, aber wir brauchen mehr. Wie sieht es mit dem Ändern der Farbe, Größe, Abstände usw. aus? Hier kommt ::marker zur Hilfe. Es ermöglicht das individuelle und globale Targeting dieser Pseudoelemente über CSS:

li::marker {
  color: hotpink;
}

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

Die Eigenschaft list-style-type bietet sehr begrenzte Gestaltungsmöglichkeiten. Mit dem Pseudoelement ::marker können Sie ein Targeting auf die Markierung selbst vornehmen und Stile direkt darauf anwenden. So haben Sie viel mehr Kontrolle.

Allerdings können Sie nicht jede CSS-Eigenschaft in einer ::marker verwenden. Die Liste der zulässigen und nicht zulässigen Eigenschaften ist in der Spezifikation klar angegeben. Wenn Sie mit diesem Pseudoelement etwas Interessantes ausprobieren und es nicht funktioniert, finden Sie in der folgenden Liste eine Anleitung dazu, was mit CSS möglich ist und was nicht:

Zulässige ::marker-Properties für Preisvergleichsportale

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

Der Inhalt einer ::marker wird mit content geändert, nicht mit list-style-type. Im nächsten Beispiel wird das erste Element mit list-style-type und das zweite mit ::marker formatiert. Die Eigenschaften im ersten Fall gelten für das gesamte Listenelement, nicht nur für die Markierung. Das bedeutet, dass sowohl der Text als auch die Markierung animiert werden. Bei Verwendung von ::marker können wir nur das Markierungsfeld und nicht den Text für das Targeting verwenden.

Beachten Sie auch, dass die unzulässige background-Property keine Auswirkungen hat.

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;
}
Gemischte Ergebnisse zwischen Markierung und 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;
}
Gezielte Ergebnisse zwischen Markierung und Listenelement


Inhalt einer Markierung ändern

Im Folgenden finden Sie einige Möglichkeiten, wie Sie Markierungen gestalten können.

Alle Listeneinträge ändern

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

/* OR */

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

Nur einen Listeneintrag ändern

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

Listeneintrag in SVG ändern

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

Nummerierte Listen ändern Wie sieht es mit einer <ol> aus? Die Markierung für einen sortierten Listeneintrag ist standardmäßig eine Zahl und kein Aufzählungszeichen. In CSS werden diese als Zähler bezeichnet und sind sehr leistungsstark. Sie können sogar Eigenschaften festlegen und zurücksetzen, wo die Nummer beginnt und endet, oder sie in römische Ziffern umwandeln. Können wir das gestalten? Ja. Wir können sogar den Wert für den Inhalt der Markierung verwenden, um unsere eigene Nummerierungspräsentation zu erstellen.

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

Debugging

Mit den Chrome-Entwicklertools kannst du die auf ::marker-Pseudoelemente angewendeten Stile prüfen, debuggen und ändern.

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

Zukünftiger Pseudoelementstil

Weitere Informationen zu ::marker finden Sie hier:

Es ist toll, wenn man Zugang zu etwas bekommt, das sich nur schwer gestalten lässt. Sie können andere automatisch generierte Elemente gestalten. Vielleicht frustriert Sie das Problem mit <details> oder der Anzeige für die automatische Vervollständigung von Sucheingaben, da diese Elemente in Browsern nicht auf die gleiche Weise implementiert sind. Du kannst beispielsweise auf https://webwewant.fyi einen Wunsch erstellen, um anderen über Neuigkeiten zu informieren.