Farbe von Bulletpunkten

[Gunnar Bittersmann]

Hello out there!

Hier gleich die Antwort auf beide deiner Fragen:

Ich möchte für eine <ul>-Liste andere Bulletpunktzeichen verwenden als die, die fest vorgegeben sind (disc, circle, square etc.).
Kann ich dafür jedes beliebige Zeichen z. B. &#8419; benutzen und wie kann ich das in CSS umsetzen?

Die Verwendung der dezimalen Angabe ist IMHO unsinnig; man muss immer erst umrechnen, um zu wissen, um welches Zeichen es sich handelt, da die Unicode-Charts nur hexadezimale Angaben verwenden.

Die Zahl war aber auch nur ein Schuss ins Blaue, oder? U+20E3 combining enclosing keycap dürfte als Bulletzeichen nicht verwendbar sein.

Und in CSS benötigst du auch die hexadezimale Angabe.

9654 in deinem anderen Posting sieht da schon besser aus: U+25B6 black right-pointing triangle.

Wie kann ich lediglich die Farbe der Bulletpunkte in einer <ul>-Liste ändern?
Ich möchte die Farbe des Textes hinter den Bulletpunkten unverändert lassen.

Dazu müssten Bullet und Listitem-Text unterschiedliche (Pseudo-)Elemente sein.

Also das vorhandene Bulletzeichen entfernen und durch ein eigenes ersetzen:

ul {  
  list-style-type: none;  
}  
  
li {  
  text-indent: -0.9em;  
}  
  
li::before {  
  color: red;  
  content: "\25B6 \A0";  
}

Wenn du UTF-8 als Codierung verwendest, solle es mit einem Unicode-fähigen Editor auch so gehen:

li::before {  
  color: red;  
  content: "▶\A0";  
}

Wenn das Stylesheey in einer externen Datei steht, muss die Codierung am Anfang angegeben werden:

@charset "UTF-8";

Alte IEs kennen das ::before-Pseudoelement nicht, vor diesen wäre das also mittels conditional comments oder 'html>body' zu verstecken. IE-Nutzer kommen dann nicht in den Genuss der anderen, andersfarbigen Bullets, aber die wollen das so. [tm]

See ya up the road,
Gunnar