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

[Rolf B]

Hallo Bruno,

das mit dem ::before geht prinzipiell schon. Mit einem Unicode-Pfeil:

ul {
  padding-left: 3em;
}
li {
  position:relative;
  list-style-type: none;
}
li::before {
  content: "➞";
  position:absolute;
  left: -1em; top:0;
}

Das Problem ist, dass die meisten Pfeile zu hoch sind. Sind sie im <li> mit drin, wird es höher. Zieht man sie aus dem <li> heraus in ein ::before, stimmt die Ausrichtung nicht.

Du könntest einen Workaround mit Hilfe der text-indent Eigenschaft ausprobieren. Die kennt negative Werte und funktioniert sogar im IE11. Du musst den Pfeil dann nur in einen span setzen und dem ein display:inline-block verpassen.

Also so:

<ul>
<li><span>➞</span>Eins</li>
<li><span>➞</span>Eine lange Geschichte, das mit der Nummer zwei. 
Sie dauert und dauert und hat soviel Sinn wie ein Eiswürfel am Nordpol.</li>
</ul>

ul {
  padding-left: 2em;
}
li {
  list-style-type: none;
}
li span {
  display: inline-block;
  text-indent: -1.5em;
}

Ob das andere Nachteile hat, kann ich gerade nicht erkennen.

Es ist aber ein Workaround. Die richtige Lösung kommt erst noch und erlaubt die Angabe eines freien Listensymbols im CSS. Das kennt derzeit aber nur der Fuchs.

Rolf