Aufzählungslisten mit eigener Grafik

Aufzählungslisten werden im Browser standardmäßig mit einem Punkt oder einem Kästchen dargestellt. Diese lassen sich zwar farblich anpassen, sehen bei manchen Designs jedoch nicht immer vorteilhaft aus.

In diesem Artikel zeige ich dir, wie du mit CSS die Aufzählungszeichen mit einer eigenen Grafik anpassen kannst.

 

Definition eigener Grafiken in einer Aufzählungsliste

Mittels des Attributes list-style-image lassen sich eigene Grafiken für Aufzählungslisten definieren. Im Stylesheet selbst sieht es dann wie folgt aus.

 

Code-Beispiel:

ul {
  list-style-image:url('grafik.jpg');
 }

 

Beim Einsetzen dieses Code-Schnipsel, würde die Aufzählungsliste fortan mit der eigenen Grafik „grafik.jpg“ angezeigt werden.

 


Anzeigebeispiel:

  • Punkt 1 in der Liste
  • Punkt 2 in der Liste
  • Punkt 3 in der Liste

 

Der Quellcode dieses Anzeigebeispiels lautet dabei wie folgt:

<ul style="list-style-image: url('https://webmasterparadies.de/favicon.ico');">
     <li>Punkt 1 in der Liste</li>
     <li>Punkt 2 in der Liste</li>
     <li>Punkt 3 in der Liste</li>
 </ul>

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.