Endlich wird es einfach, die Farbe von Listenpunkten zu ändern

In meinen Anfängen waren die allgemeinen Ratschläge wie folgt:

<ul>
  <li><span>List item</span></li>
  <!-- ... -->
</ul>

li { color: red; } /* bullet */
li span { color: black; } /* text */

Nicht schlecht, aber auch nicht großartig. Sie „setzen alles zurück“ auf der Span-Ebene, daher wird es komplizierter, je mehr Sie tun.

Die Dinge werden viel einfacher. Lassen Sie uns einen Spaziergang durch diese immer moderner werdende Welt machen.

---

Eine Alternative war, das Standard-Listenstyling zu kopieren und es durch ein Pseudo-Element zu ersetzen.

ul {
  list-style: none;
}

li::before {
  content: "• ";
  color: red;
}

Wenn wir zählen müssen, könnten wir das mit CSS-Zählern tun.

ol {
  list-style: none;
  counter-reset: my-awesome-counter;
}

ol li {
  counter-increment: my-awesome-counter;
}

ol li::before {
  content: counter(my-awesome-counter) ". ";
  color: red;
}

---

Kurzer Einschub hier: Das hilft zwar nicht bei der Farbe, aber Sie können festlegen, welches Zeichen für den Aufzählungspunkt verwendet werden soll, indem Sie einen String setzen, wie z.B.

ul {
  list-style-type: '✽ ';
}

Dies ist Stand Firefox 39 (2015) und Chrome 79 (der am 9. Dez. 2019 erscheint).

Für geordnete Listen gibt es eine Fülle von sprachspezifischen Optionen. Und diese Sprachstile funktionieren auch für CSS-Zähler, über die Sie mehr in Hui Jings Deep Dive erfahren können.

Siehe den Pen
Random CSS counters playground von Chen Hui Jing (@huijing)
auf CodePen.

---

Aber die ganze Zeit wollten wir nur den dummen Aufzählungspunkt (oder was auch immer es ist) auswählen und ihn gestalten. Jetzt fangen wir an, genau das tun zu können.

Ab Firefox 68 (Juli 2019) können Sie Folgendes tun:

li::marker {
  color: red;
  content: "►";
}

...was, wie Sie sehen können, die Farbe und das Aufzählungssymbol ändert. Das ist definitiv der sauberste und einfachste Weg, also ist es schön, Fortschritte zu sehen.

Tejas demonstriert

Siehe den Pen
::marker example von Tejas (@tejask)
auf CodePen.

Manuel Matuzović merkt an, dass man, wenn man einem Element den Anzeigetyp list-item zuweist, auch Marker darauf verwenden kann.

h2 {
  display: list-item;
}

h2::marker {
  color: orange;
  content: "☞";
}

Selbst Safari unterstützt dies zum Zeitpunkt des Schreibens, also sollten wir uns hier auf Chrome verlassen.