Coder Wiki | HowTos | Aufzählungsliste mit einfachem Strich

Aus Textbearbeitungsprogrammen kennt man Listen mit Bindestrichen (und anderen Zeichen) als Anführungszeichen. Dies lässt sich mit den Listen in HTML nicht so einfach umsetzen. Es gibt mehrere Möglichkeiten dies mit HTML und CSS zu machen, die hier kurz gezeigt werden sollen.

Man könnte man den Listen ein Bild voranstellen. Dies ist allerdings ein bisschen zu viel Aufwand für ein kleines Zeichen, wie den Bindestrich und wird daher hier nicht weiter erläutert.

Also widmen wir uns der eleganteren Lösung:
In CSS gibt es Pseudo-Elemente. Eines, das wir brauchen ist :before. Damit lässt sich Inhalt vor alle Elemente setzen.
Genau dies wenden wir auf einen einfachen Absatz an:

[Get Code]

absatz_als_liste.html
<p class="listenabsatz">Besonders langer Inhalt, damit auch wirklich die Listenfunktion wie man sie aus Textbearbeitungsprogrammen kennt, deutlich wird. Damit ist vor allem das Einrückern der Nachfolgezeilen gemeint...</p>

Die dazugehörigen CSS-Angaben:

[Get Code]

style.css
p.listenabsatz:before {
  content: "-";
  margin-right:2em;
}
 
p.listenabsatz{
  text-indent:-2.4em; /*   +0.4 em vom Wert oben p.rein:before    */
  margin-left:5em;
}

Dies bewirkt also folgendes: Es wird jedem Absatz das Zeichen "-" vorangestellt und die erste Zeile wird eingerückt. Der margin-left beschreibt den Abstand vom linken Rand und muss bei diesem Zeichen X+0,4 betragen.
Damit haben wir nun unser Ziel erreicht und können jede beliebige Liste mit einem beiliebigen Anführungszeichen erzeugen.

Hinweis: Das ganze funktioniert leider nicht im Internet Explorer, da dieser :before nicht interpretieren kann. Man kann allerdings einen sehr umständlichen Hack anwenden, der auf der Anwendung von Bilder basiert. Nicht schön, aber wenn man es unbedingt braucht, vielleicht nützlich.

Coder How To's

Aufzählungsliste mit einfachem Strich