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

[Rolf B]

Hallo Bruno,

Du kannst dem ::before-Element eigentlich alle CSS Eigenschaften verpassen, die Du möchtest. Nicht alle sind sinnvoll, das ergibt sich dann aber von selbst. Z.B. wäre display:table Unfug, ein ::before::before würde auch nicht funktionieren.

color:red ist kein Problem. Farbverläufe als Background, Animationen, Schrift, Größe, Rahmen, geht alles.

Und dass im CSS via Content Inhalte platziert werden statt im HTML, ist ja eigentlich unschön.

Das kommt drauf an, danke dass Du das ansprichst. Inhalte gehören ins HTML. Aber diese Pfeile sind kein Inhalt (im Sinne von: Das vermittelt dem Leser Information), sondern Dekoration, und gehören deshalb ins CSS. D.h. die ::before-Lösung ist formal richtig, mit Formatierungsproblemen die ich nicht hinreichend universell gelöst bekommen habe. Für einen bestimmten Font könnte man die Pfeile wohl noch passend hinschieben, aber das kann man ja nicht voraussetzen.

Der Span-Workaround mit text-indent ist vom Prinzip her FALSCH! Eigentlich müsste der span noch ein aria-hidden="true" bekommen, damit ein Screen-Reader den Pfeil nicht vorzulesen versucht.

Eine bessere Lösung wäre vielleicht ein ::before mit leerem Content und einer gegebenen Breite, in der ein SVG-Pfeil steckt. Aber auch bei dem hat man das Problem, ihn sauber an der mittleren Orientierungslinie des für li verwendeten Font auszurichten.

Vielleicht hat ja einer der CSS Wizards hier noch eine bessere Idee (ein Teil davon sitzt gerade in Dortmund in der Mitgliederversammlung).

Rolf