HTML / CSS: Bullet-Farbe von HTML-Listen ändern

Für die wenigen unter euch, die jemals vor dem Problem stehen werden, die Farbe der Aufzählungszeichen einer HTML-Liste mittels CSS unabhängig von der Textfarbe ändern zu müssen und dabei nicht auf ein Hintergrundbild zurückgreifen wollen, so geht’s:

HTML:
<ul>
  <li><span>Listenpunkt #1</span></li>
  <li><span>Listenpunkt #2</span></li>
  <li><span>Listenpunkt #3</span></li>
</ul>

CSS:
li {color: green;}
li span {color: black;}

Ergebnis:

Ja stimmt, zusätzliches, überflüssiges Markup ist nicht besonders elegant. Funktioniert dafür aber auch mit dem IE7 – im Gegensatz zu einer etwaigen li:before-Lösung.

Dieser Beitrag wurde unter Technik, Web, Webdesign abgelegt und mit , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>