In der Regel wird Listenelementen in ungeordneten Listen unformatiert ein gefüllter Kreis (disc) vorangesetzt. Mit CSS lässt sich dieses Zeichen durch verschiedene andere ersetzen, die nicht minder unspektakulär sind. Gut, eine Liste ist selten etwas Außerordentliches, aber man hätte es doch gerne das ein oder andere Mal ein wenig dekorativer. Auch diese Möglichkeit bietet CSS mit der Anweisung list-style-image, die das Aufzählungszeichen mittels URL durch ein Bild ersetzt. Vorausgesetzt man hat ein passendes Bild zur Hand.

Im entgegen gesetzten Fall kann man sich mit Unicodezeichen behelfen und mit den CSS-Anweisungen :before und content diese dem Listenelement zuweisen. Die Formatierung für die Liste ist recht simpel:
ul { list-style-type: none;}
li:before { content: "2192A0A0";}
Die erste Zeile hebt die Standardformatierung auf. In der zweiten Zeile wird vor das Listenelement ein Unicodezeichen als Hexadezimalwert gesetzt. Damit dieses erkannt wird, wird dem Hexwert ein Backslash vorangestellt. Anschließend folgen zwei Leerzeichen, um einen Abstand zu dem folgenden Listenelement zu erhalten. Hier kann mit der Anzahl der Zeichen variiert werden.

Ich habe euch mal einige interessante Unicodezeichen rausgesucht, die sich für die Gestaltung von Listenelementen eignen. Die Darstellung der Zeichen ist jedoch von der Schriftart und dem Browser anhängig. Leider unterstützt der Internet Explorer bis Version 8 die CSS-Anweisungen content und :before nicht. Wer ältere Versionen des IE abfangen möchte, der kann die Formatierung der Listenelemente über Conditional Comments vornehmen. Auch der Safari kennt einige der Unicodezeichen nicht und beschränkt sich stattdessen auf die Darstellung eines schicken Rechtecks.

Weitere Pfeile und Unicodezeichen, sowie eine Kompatibilitätsliste der Browser findet ihr bei alanwood.net.