Fundament

Es gibt mehrere Möglichkeiten Listenelemente mit zu stylen.

Für Custom Marker eignet sich aktuell die Technik mit ::before-Pseudoelementen am besten da Sie gut stylebar ist und in allen Browsern zuverlässig funktioniert.

Zukünftig werden Listenmarker direkt über ::marker stylebar sein.

In diesem Theme wird standardmäßig die Default-Methode benutzt. Falls Custom Marker benötigt werden kann die Klasse .list-style--pseudo für den Einsatz ::before oder .list-style--marker für den Einsatz von ::marker auf den umschließenden Block gesetzt werden.

Default-Styling

Vorteil: funktioniert überall Nachteil: kaum Styling-Möglichkeiten

ul li { list-style-type: "disc"; } 
ol li { list-style-type: "decimal"; }

Styling mit ::before

Vorteil: funktioniert überall, komplett stylebar Nachteil: Code etwas komplizierter

ul li::before { content: content: "•"; }

ol            { counter-reset: my-counter; }
ol li         { counter-increment: my-counter; }
ol li::before { content: counter(my-counter) ". "; }

Styling mit ::marker

Vorteil: komplett stylebar, dafür vorgesehener Standard Nachteil: geht erst ab Chromium 86 & Firefox 68: https://caniuse.com/css-marker-pseudo

ul li::marker { content: "•"; }

ol li::marker { content: counter(list-item) ". "; }