Aufzählung mit abweichender Bulletfarbe

Warning: Use of undefined constant services - assumed 'services' (this will throw an Error in a future version of PHP) in /home/.sites/500/site1394/web/blog/wp-content/plugins/2-klicks-button-socialshareprivacy-plugin/2-klicks-button-socialshareprivacy.php on line 108 Warning: Use of undefined constant services - assumed 'services' (this will throw an Error in a future version of PHP) in /home/.sites/500/site1394/web/blog/wp-content/plugins/2-klicks-button-socialshareprivacy-plugin/2-klicks-button-socialshareprivacy.php on line 116 Warning: Use of undefined constant services - assumed 'services' (this will throw an Error in a future version of PHP) in /home/.sites/500/site1394/web/blog/wp-content/plugins/2-klicks-button-socialshareprivacy-plugin/2-klicks-button-socialshareprivacy.php on line 116 Warning: Use of undefined constant services - assumed 'services' (this will throw an Error in a future version of PHP) in /home/.sites/500/site1394/web/blog/wp-content/plugins/2-klicks-button-socialshareprivacy-plugin/2-klicks-button-socialshareprivacy.php on line 116 Warning: Use of undefined constant services - assumed 'services' (this will throw an Error in a future version of PHP) in /home/.sites/500/site1394/web/blog/wp-content/plugins/2-klicks-button-socialshareprivacy-plugin/2-klicks-button-socialshareprivacy.php on line 116 Warning: Use of undefined constant services - assumed 'services' (this will throw an Error in a future version of PHP) in /home/.sites/500/site1394/web/blog/wp-content/plugins/2-klicks-button-socialshareprivacy-plugin/2-klicks-button-socialshareprivacy.php on line 116 Warning: Use of undefined constant services - assumed 'services' (this will throw an Error in a future version of PHP) in /home/.sites/500/site1394/web/blog/wp-content/plugins/2-klicks-button-socialshareprivacy-plugin/2-klicks-button-socialshareprivacy.php on line 116 Warning: Use of undefined constant services - assumed 'services' (this will throw an Error in a future version of PHP) in /home/.sites/500/site1394/web/blog/wp-content/plugins/2-klicks-button-socialshareprivacy-plugin/2-klicks-button-socialshareprivacy.php on line 116 Warning: Use of undefined constant services - assumed 'services' (this will throw an Error in a future version of PHP) in /home/.sites/500/site1394/web/blog/wp-content/plugins/2-klicks-button-socialshareprivacy-plugin/2-klicks-button-socialshareprivacy.php on line 116 Warning: Use of undefined constant services - assumed 'services' (this will throw an Error in a future version of PHP) in /home/.sites/500/site1394/web/blog/wp-content/plugins/2-klicks-button-socialshareprivacy-plugin/2-klicks-button-socialshareprivacy.php on line 116 Warning: Use of undefined constant services - assumed 'services' (this will throw an Error in a future version of PHP) in /home/.sites/500/site1394/web/blog/wp-content/plugins/2-klicks-button-socialshareprivacy-plugin/2-klicks-button-socialshareprivacy.php on line 116 Warning: Use of undefined constant services - assumed 'services' (this will throw an Error in a future version of PHP) in /home/.sites/500/site1394/web/blog/wp-content/plugins/2-klicks-button-socialshareprivacy-plugin/2-klicks-button-socialshareprivacy.php on line 116 Warning: Use of undefined constant services - assumed 'services' (this will throw an Error in a future version of PHP) in /home/.sites/500/site1394/web/blog/wp-content/plugins/2-klicks-button-socialshareprivacy-plugin/2-klicks-button-socialshareprivacy.php on line 116 Warning: Use of undefined constant services - assumed 'services' (this will throw an Error in a future version of PHP) in /home/.sites/500/site1394/web/blog/wp-content/plugins/2-klicks-button-socialshareprivacy-plugin/2-klicks-button-socialshareprivacy.php on line 116 Warning: Use of undefined constant services - assumed 'services' (this will throw an Error in a future version of PHP) in /home/.sites/500/site1394/web/blog/wp-content/plugins/2-klicks-button-socialshareprivacy-plugin/2-klicks-button-socialshareprivacy.php on line 116 Warning: Use of undefined constant services - assumed 'services' (this will throw an Error in a future version of PHP) in /home/.sites/500/site1394/web/blog/wp-content/plugins/2-klicks-button-socialshareprivacy-plugin/2-klicks-button-socialshareprivacy.php on line 116 Warning: Use of undefined constant services - assumed 'services' (this will throw an Error in a future version of PHP) in /home/.sites/500/site1394/web/blog/wp-content/plugins/2-klicks-button-socialshareprivacy-plugin/2-klicks-button-socialshareprivacy.php on line 116 Warning: Use of undefined constant services - assumed 'services' (this will throw an Error in a future version of PHP) in /home/.sites/500/site1394/web/blog/wp-content/plugins/2-klicks-button-socialshareprivacy-plugin/2-klicks-button-socialshareprivacy.php on line 116 Warning: Use of undefined constant services - assumed 'services' (this will throw an Error in a future version of PHP) in /home/.sites/500/site1394/web/blog/wp-content/plugins/2-klicks-button-socialshareprivacy-plugin/2-klicks-button-socialshareprivacy.php on line 116

Wie man in HTML/CSS eine Aufzählung mit abweichender Bulletfarbe macht

Das Problem

Ich möchte eine Aufzählung machen, bei der das Bullet eine andere Farbe hat, als der Text der Aufzählung:

  • item 1
  • item 2
  • item 3

Das ist insofern ein Problem, als es (noch?) keinen CSS Befehl gibt, mit dem ich das Bullet direkt ansprechen kann. Um Listen formatieren zu können, kann ich nur die Gesamtliste (zB ul, ol) und die Formatierung der Listenelemente (li) ansprechen.

Und so geht’s

als erstes die „normalen“ Bullets ausschalten:

ul, li {
    list-style-type: none;
    color: blue; /* das w?rde normalerweise Text+Bullet blau machen! */
}

dann die färbigen Bullets wieder rein:

li:before {
    color: #C00;    /* Bullets rot machen */
    content: "\25A0"" "; /* als Bullet ein Quadrat einsetzen */
}

statt /250A kann auch ein Buchstabe, direkt ein Zeichen (sofern das CSS selbst in UTF8 gespeichert wurde; gefährlich!) oder ein anderer [UTF-Code][23] eingegeben werden. Dabei ist die übliche Notierung U+ durch den Backslash zu ersetzen. (besonders zu empfehlen: [geometric shapes][24])

Die üblichen Lösungsvorschläge mit <font> oder <li><span>...</span></li> zu arbeiten finde ich ausgesprochen unpraktisch. Erstere Methode ist schlicht überholt, und die zweite Methode kann nur jemandem einfallen, der ein CMS oder einen HTML-Editor verwendet.

Die dritte Methode wäre ein GIF als Bullet-Zeichen zu verwenden was mir vor allem deshalb unelegant erscheint, weil dadurch die Unabhängigkeit von der Auflösung des Bildschirms verloren geht.

li {
    list-style-image: url(redball.gif)
}

Schlanken Code produziert das alles nicht. Bin gespannt, was die Standard-Polizei (Ossi?) dazu sagt… :-)

Schreibe einen Kommentar

This site uses Akismet to reduce spam. Learn how your comment data is processed.