[Lim_Dul]

Gibt es bei einer Liste (ul) eine Möglichkeit, den Bullet-Point davor in einer anderen Farbe zu formatieren, ohne dafür eine eigene Grafik einzubinden?

[stephantom]

<style type="text/css">
ul li { list-style-type:none; }
ul li:before { content:"• "; color:red; }
</style>
<ul>
<li>eins</li>
<li>zwei</li>
<li>drei</li>
<li>vier</li>
</ul>

Funktioniert in allen modernen Browsern.

[Lim_Dul]

Danke

[DubZy]

hab auch mal ne frage, ist es möglich und wenn ja wie, den punkt von einer liste durch eine grafik zu ersetzen?

[stephantom]

Mit der Eigenschaft list-style-image geht das.

[Kirby]

Für den Fall, dass du die Liste als Menü verwenden willst,. wäre es sinnvoller mit list-style-image: none; zu arbeiten, den Text im <a>-Tag einzurücken (text-indent:) und ein positioniertes Hintergrundbild (background:) zu geben. Damit kann man das Menü mMn besser bearbeiten.
Ansonsten bietet sich die Methode von stephantom an.

[Greg5000]

Statt text-indent lieber padding-left, dann kann man den Link auch auf voller breite anklicken.

[aNtiCHrist]

Das Ausgangsproblem könnte man auch alternativ so lösen, dass man die Liste mit der für den Punkt gewünschten Farbe auszeichnet und dann innerhalb des Listenelements ein zusätzliches div/span-Element einbaut, dem man dann die Textfarbe zuweist. Ist zwar nicht so elegant wie Generated Content, dafür funktioniert es dann auch im ollen IE, der ja selbst in Version 7 noch nichts mit :before und :after anfangen kann.

[Dexter]

Noch eleganter könnte man die im Ausgangsposting gewünschte Alternative ignorieren und fragen, was gegen ein Background-image spricht.

[Merinor]

Zitat von Dexter 

Noch eleganter könnte man die im Ausgangsposting gewünschte Alternative ignorieren und fragen, was gegen ein Background-image spricht.

Das Fehlen von Dynamik.

Wobei ich der Meinung bin, extra für Listenpunkte weitere Elemente zu benutzen etwas den Nutzen des ganzen übersteigt – man muss die Dateigröße ja nicht unnötig steigern…