## How to define the color of characters in OL/LI lists via CSS, WITHOUT using any image bullets or any span tag?

Tags: css,css3

### Problem :

Well, mi question is very similar to this question: How to define the color of characters in OL/LI lists via CSS, WITHOUT using any image bullets or any span tag?

But in my case, I want to style the letters in an lower-alpha list (or any ordered list), but considering that each item will have a different content, so, I can't use the content:""; trick.

Is there any way to do this without JS or something? I tried to play with different combinations of pseudo classes and pseudo elements, but I think that's not the right way.

The code I tried, as you can see in the fiddle:

Relevant HTML

<ol>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
</ol>


CSS I have tried (without success)

/*ol li:first-letter {color:red;}*/
/*ol li:first-child {color:red;}*/
/*ol li:before {content:"lower-alpha";}*/
/*ol li:before:first-letter {content:"lower-alpha";}*/
/*ol:first-letter li {color:red;}*/
ol:first-letter li {color:red;}
ol li {color:black;}


### Solution :

Here is a possibility using the counter-reset / counter-increment properties:

ol {list-style:none; margin:0; padding:0; counter-reset:list;}
ol li {margin:0 0 5px; padding:0;}
ol li:before {
counter-increment:list;
content:counter(list, lower-alpha) ". ";
color:red;
}


see fiddle: http://jsfiddle.net/jRVH5/14/