Bullets colors different from the text color in a list without using images or span

Developing a bullet list I had to use a different color for the bullets and for the text in the list.
The usual markup to achieve this effect is using a span, but I was looking for a more cool way to achieve this effect, so I did that using a pseudo selector on the list.
The idea is using the “:before” selector and assign a color to it different from the “real” list color.

The markup

</pre>
<ul class="special_list">
<li>Bullet different from the text</li>
<li>We use a css pseudo selector</li>
<li>The :before with a content</li>
<li>It's the key.</li>
</ul>
<pre>

The CSS

We define a “main” color for the list, remove the “list style” form the list elements and finally we apply the bullet in the color we prefer.

ul.special_list {
color: black;
}

ul.special_list li {
list-style: none;
}

ul.special_list li:before {
content:'\2022';
display: block;
position: relative;
max-width: 0px;
max-height: 0px;
left: -10px;
top: -0px;
color: yellow;
font-size: 20px;
}

If we would like to use a different symbol you just have to change the content to the unicode char you’d like to use.