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

[Gunnar Bittersmann]

@@Bruno Thomann

Ich meine mitbekommen zu haben, dass Tabellen nicht mehr so 'in' seien

Und wenn sie doch Verwendung finden sollten, dann sollten sie zumindest als Layouttabellen gekennzeichnet sein:

<table role="none presentation">

deshalb meine ursprüngliche Frage nach Listen.

Wenn du vorhast, den Pfeil mit ins Markup zu bringen, kannst das auch mit Listen tun: <ul> anstatt <table>; <li> anstatt <tr>; <span class="marker"> anstatt <td>.

<ul class="menu">
	<li><span class="marker">→</span> Kurzer Titel</li>
	<li><span class="marker">→</span> Ein langer Titel, braucht zwei Zeilen</li>
	<li><span class="marker">→</span> Das ist ein ganz besonders langer Titel, braucht drei Zeilen</li>
	<li><span class="marker">→</span> Titel mit Untertitel:
		<ul>
			<li><span class="marker">→</span> kurzer Untertitel</li>
			<li><span class="marker">→</span> ein sehr langer Untertitel</li>
		</ul>
	</li>
</ul>

Die Bullets machst du mit .menu, .menu ul { list-style: none } weg. Das Tabellenlayout könntest du umsetzen mit

.menu, .menu ul { display: table }
.menu li { display: table-row }
.marker {display: table-cell }

Die Pfeile sind in der Textfarbe ihres jeweiligen Listenitems, siehe Beispiel 1

Wenn du vorhast, den Pfeil mit ins Markup zu bringen, dann kannst auch SVG so verwenden, wie ich unlängt schrieb: ein SVG (intern oder extern) mit <symbol>s und anstelle von <span class="marker">→</span> steht dann <svg><use xlink:href="#arrow-right"/></svg>.

<ul class="menu">
	<li><svg><use xlink:href="#arrow-right"/></svg>Kurzer Titel</li>
	<li><svg><use xlink:href="#arrow-right"/></svg>Ein langer Titel, braucht zwei Zeilen</li>
	<li><svg><use xlink:href="#arrow-right"/></svg>Das ist ein ganz besonders langer Titel, braucht drei Zeilen</li>
		<ul>
			<li><svg><use xlink:href="#arrow-right"/></svg>kurzer Untertitel</li>
			<li><svg><use xlink:href="#arrow-right"/></svg>ein sehr langer Untertitel</li>
		</ul>
	</li>
</ul>

Auch dann sind die Pfeile in der Textfarbe ihres jeweiligen Listenitems, siehe Beispiel 2

LLAP 🖖