FOL9000

Farbe und Symbol von Listen-Bullets in CSS setzen

von | Keine Kommentare

Die Listen-Bullets in HTML/CSS sind leider nicht direkt gestaltbar. In der Regel ist das kein Problem, es geht fast immer ohne weitere Einflussnahme. Was aber, wenn man die Bullets z.B. in einer anderen Farbe möchte?

Wie so oft ist die Lösung ganz simpel: Zunächst stellt man die Standard-Bullets der Liste ab und fügt dann vor jedes li-Element ein neues, selbst gestaltetes Zeichen ein:

ul {
  list-style-type: none;
}
li:before {
  content: "■";
  color: red;
  // font-size etc.
}

Zeichen und Farbe des neuen Bullets sind hier natürlich nur ein Beispiel; man hat hier mit Zeichen, Farben und Abständen einen ziemlich großen Spielraum. Gerade bei Listen, die deutlich herausgehoben sind und nicht in laufendem Text stehen, kann man so schöne Effekte erzielen.

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.