Zeichen für Listenpunkt abändern

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;
}


2 Kommentare zu “Zeichen für Listenpunkt abändern”

  1. Norman sagt:

    Könnte man bei “content” auch eine individuelle Grafik als Zeichenkette einbinden?

    1. Das geht problemlos und würde dann folgendermaßen aussehen:

      ul li:before {
      	content: url(img.gif);
      }

      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.

Kommentar hinterlassen

Ihre eMail-Adresse wird nicht veröffentlicht.

Sie können folgende HTML-Tags und -Attribute verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>