Farbige Bullets in Listen

 

Möchte man in Listen den Punkt / Ziffer und den Text farbig gestalten, bedient man sich wieder mit CSS.
Wichtig ist, dass man ein Markup setzt und mit dem Element <span> den Listenpunkt vom Text trennt.

 

Beispiel:

  • Zeile 1 in der Liste mit Punkt
  • Zeile 2 in der Liste mit Punkt
  1. Zeile 1 in der Liste mit Ziffer
  2. Zeile 2 in der Liste mit Ziffer

 

So sieht die fertige Zeile im Quelltext  ( body ) aus:

<body>
<style type="text/css">
li {
color: #FF3300;
}
li span {
color: #FFFF99;
}
</style>
<ul>
<li><span>Zeile 1 in der Liste mit Punkt</span></li>
<li><span>Zeile 2 in der Liste mit Punkt</span></li>
</ul>
<ol>
<li><span>Zeile 1 in der Liste mit Ziffer</span> </li>
<li><span>Zeile 2 in der Liste mit Ziffer</span> </li>
</ol>

</body>

Hier der Code zum Kopieren:

 

Verwendet man eine CSS-Datei , fügt man einfach die Anweisung dort ein und hat auf jeder Seite in der diese CSS-Datei verwendet wird diese Eigenschaft zur Verfügung.
Wichtig ist halt nur, dass man auch das Element <span> im Listentext verwendet!

Hier der Code zum Kopiren: