Auch nach über 21 Jahren finde ich CSS immer noch faszinierend. Du entdeckst bei dieser – viel zu häufig unterschätzen – Sprache immer wieder etwas Neues oder vor langer Zeit vergessenes. So ist es mir mit diesem Thema gegangen.
Vor ein paar Jahren bin ich bereits auf das Thema gestoßen, es aber dann vergessen. Vor einigen Tagen ist es bei einem Projekt wieder aktuell geworden. Es geht darum, wie du mithilfe von CSS, die Listenzeichen bei den nummerierten und bei den Aufzählungslisten individuell gestalten kannst.
Ich rede hierbei nicht von der bereits bekannten CSS-Eigenschaft list-style-type. Damit kannst du ein wenig die Form der Aufzählungszeichen bestimmen – Kreis, Quadrat etc. – und bestimmen, ob die nummerierte Liste mit einer führenden Null beginnt oder ob statt den arabischen die römischen Zahlen genutzt werden sollen.
Ich rede hier von einer anderen Möglichkeit, wo du direkt und ohne Umwege die Listenzeichen individuell an der Form und an Farben anpassen kannst.
Im folgenden CodePen erkennst du, was ich meine:
See the Pen Listen-Zeichen mit CSS stylen by Vlad (@vladimir-simovic) on CodePen.
Spannend an dem CodePen-Beispiel sind die folgenden CSS-Regeln:
::marker {color: #07a;}
ul ::marker {font-size: 110%; content: "🛒 ";}
ol ::marker {font: bold 140% 'comic sans ms', cursive;}
.zocken ::marker {content: "🎮 ";}Das Pseudoelement ::marker gibt dir die Möglichkeit, die Listenzeichen zielgerichtet zu beeinflussen. Du kannst nur dem Listenzeichen eine andere Farbe, eine andere Schriftart und -Größe spendieren oder es durch ein Symbol oder Emoji ersetzen. Du kannst sogar noch weiter gehen und hier CSS-Animationen und Transitionen einsetzen.
Die Browser-Unterstützung für ::marker ist gut. Alle aktuellen Versionen von Firefox, Safari und den Chromium-Browsern (Chrome, Brave, Vivaldi, Opera, Edge) unterstützen dieses Pseudoelement. Lediglich bei Animationen und Transitionen in diesem Einsatzszenario scheinen Safari und Firefox für Android es noch nicht zu unterstützen.
Quellen
Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.
