How to colour the list-style-type auto-generated numbers?

Question

I\'m using the following list:

    
This is the first footnote...
    &         


        

Answer 1

Combining some of the other answers, which I found to be incomplete, I find this most complete. It considers sub style-types for different levels in the hierarchy and considers that an li may be more than one line (:after places at bottom line, so we use :before).

Note customizing of side character as well: 1. 1).Tested in Chrome.

ol { counter-reset:li; }
ol li {
    list-style-type:none;
    counter-increment:li;
    position:relative;
}
ol li:before {
    content:counter(li) ")";
    position:absolute;
    left: -2.6em;
    width: 2em;
    text-align: right;
    color: #f00;
}
ol ol li:before { content:counter(li,lower-alpha) ")"; }
ol ol ol li:before { content:counter(li,lower-roman) "."; }