Sam Sam - 1 year ago 86
CSS Question

How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

Imagine a simple unsorted list with some

items. Now, I have defined the bullets to be square shaped via
However, if I set the color of the
items with
color: #F00;
then everything becomes red!

While I ONLY want to set the color of the square bullets. Is there an elegant wat to define only the color of the bullets in CSS without using any sprite images nor span tags?


<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>



Answer Source

The most common way to do this is something along these lines:

ul {
    list-style: none;

li { 
    padding-left: 1em; 
    text-indent: -.7em;

li:before {
    content: "• ";
    color: red; /* or whatever color you prefer */

Live demo:

Will work in all browsers, including IE from version 8 and up.