list-style-type mit Unicode gestalten

KATEGORIE: (X)HTML & CSS, TIPPS VOM 05.01.2010 1

list-style-type
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.

Zeichen Beschreibung Hexwert
Leerzeichen A0
rechtsgerichteter Pfeil 2192
schwarzer rechtsgerichteter Pfeil 25BA
* Asterisk 2A
¤ Währungssymbol A4
» rechtsgerichtetes doppeltes Anführungszeichen BB
Haus 2302
Smiley 263A
Sonne 263C
Vektorprodukt 2297
weibliches Symbol 2640
männliches Symbol 2642
Pik 2660
Kreuz 2663
Herz 2665
Karo 2666
Achtelnote 266A
Achtelkette 266B
fettes Häkchen (nicht in Safari) 2714
schwarzer Stern 2605
weißer Stern 2606
schwarze Blume (nicht in Safari) 273F
Fischauge 25C9
Bullauge 25CE
weißer Zeigefinger nach rechts 261E
Thermalbad 2668
weißer Diamant mit innerem schwarzen Diamant 25C8

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

Ein Kommentar zu „list-style-type mit Unicode gestalten“

  1. Sven   18.10.2010, 16:46

    Guter Artikel, gute Infos. Danke


Kommentieren

KOMMENTAR