Nicht alle Designer finden die Standardlistenpunktsymbole von HTML und CSS ansprechend genug für ihr Design. In der Vergangenheit konnte man sich mit dem Einbinden eines Images helfen, um Listenpunkte anders aussehen zu lassen.
ul {
list-style-image: url('img.gif');
}
Es gibt aber noch eine andere Methode, mit der sich andere Listensymbole allein mit den CSS Listen realisieren lassen. Im folgenden Code-Beispiel werden kleine Fahnen als Listenpunkte angezeigt. Zu beachten ist, dass das Zeichen als Unicode angegeben werden muss.
ul {
list-style: none;
}
ul li:before {
content: '\2691';
margin-right: 7px;
}
Könnte man bei “content” auch eine individuelle Grafik als Zeichenkette einbinden?
Das geht problemlos und würde dann folgendermaßen aussehen:
Die CSS-Eigenschaft content kann diverse Werte besitzen. Eine Übersicht über alle Möglichkeiten findet man unter http://www.w3.org/wiki/CSS/Properties/content.