Different list item bullet and text colors

What if you have a bulleted list where you want the bullet color to be different than your text color? There's no property in the list-style that allows for this, unless you want to use images for your bullets, so instead we'll just add a span within our list items, and style the list and the list spans with different colors.

The Code

In this example, I'm adding 4 list items, the first 2 without the span, and the last 2 with so we can see the difference:

My list items with a span will look like so:

This one does have a span in it

And then, we add our CSS, selecting our spans and defining a different color than for our ul:

ul {
    margin: 50px; 
    list-style: inside; 
    color: red;
}

ul span {
    color: black;
}​

Presto.

Full Demo with Code