<li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen

[Gunnar Bittersmann]

@@Bruno Thomann

Danke, Gunnar, für Deinen Alternativvorschlag. An ein list-style-image habe ich auch zuerst gedacht. Ich habe auch in einem anderen Projekt schon mal einen Pfeil.jpg selbst gemalt und verwendet, weil ich nie von einer externen Quelle abhängig sein möchte. Natürlich fällt damit alles mit ::before und positions weg, dafür bezahle ich mit zwei Nachteilen, wenn ich das richtig sehe: (1) Hintergrundfarbe des Pfeils bei Änderung der Seitenhintergrundfarbe (2) Verpixelung des Pfeils, wenn der Nutzer die Schriftgrösse vergrössert.

Das zweite Problem löst sich bei Vektorgrafiken (SVG) in Luft auf. Der Pfeil skaliert mit der Schriftgröße und ist immer scharf.

In meinem naiven Glauben hatte ich gedacht, der Pfeil würde auch die Textfarbe annehmen. Dem ist aber nicht so; ein als Bild eingebundenes SVG lässt sich nicht von außen mit CSS stylen, auch fill="currentColor" beeindruckt das SVG nicht – alle Pfeile schwarz.

☞ Beispiel

Und Firefox scheint hier einen Bug zu haben: Mal sind die Pfeile zu sehen, dann wieder nicht …

LLAP 🖖