Change bullets color of an HTML list without using span

Question

I was wondering if there is a way to change the color on the bullets in a list.

I have a list like this:

<ul>    <li>House</li>    <li>Car</li>    <li>Garden</li> </ul> 

It is not possible for me to insert anything in the li's such as a 'span' og a 'p'. So can I change the color of the bullets but not the text in some smart way?

Answer 1

I managed this without adding markup, but instead using li:before. This obviously has all the limitations of :before (no old IE support), but it seems to work with IE8, Firefox and Chrome after some very limited testing. The bullet style is also limited by what's in unicode.

li {    list-style: none;  }  li:before {    /* For a round bullet */    content: '\2022';    /* For a square bullet */    /*content:'\25A0';*/    display: block;    position: relative;    max-width: 0;    max-height: 0;    left: -10px;    top: 0;    color: green;    font-size: 20px;  }

<ul>    <li>foo</li>    <li>bar</li>  </ul>