Farbige Listenpunkte

Mit einem kleinen Trick lassen sich Listenpunkte in anderer Farbe darstellen als der Text.

Das Element "ul" erhält die Farbe der Listenpunkte, mit einem "span" wird dann die Textfarbe definiert.

<ul style="color:red;">
<li> <span style="color:red;">Testtext</span></li>
<li> <span style="color:blue;">Testtext</span></li>
<li> <span style="color:green;">Testtext</span></li>
</ul>

Das Ergebnis:

  • Testtext
  • Testtext
  • Testtext

Es geht aber noch bunter. Wenn wir die Listenpunkte mit einem zusätzlichen "span" umschließen, können wir jedem Listenpunkt eine eigene Farbe geben:

<ul>
<span style="color:red;"><li><span style="color:green;">Testtext</span></li></span>
<span style="color:green;"><li><span style="color:blue;">Testtext</span></li></span>
<span style="color:blue;"><li><span style="color:red;">Testtext</span></li></span>
</ul>

Die Anzeige im Browser:

  • Testtext
  • Testtext
  • Testtext

« zurück