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

Question

I\'m using the following list:

    
This is the first footnote...
    &         


        

Answer 1

There is a way in CSS3, using the Generated and Replaced Content Module. With this technique you don't have do add any extra mark-up to your HTML. Something like this should do the trick:

ol li {
    list-style-type: none;
    counter-increment: list;
    position: relative;
}

ol li:after {
    content: counter(list) ".";
    position: absolute;
    left: -2.5em;
    width: 2em;
    text-align: right;
    color: red;
}

Answer 2

You can also use "outside" list-style attribute. See here

Answer 3

This simple CSS3 solution works in most browsers (IE8 and up):

ul {
    padding-left: 14px;
    list-style: none;
}
ul li:before {
    color: #f90;
    content: "•";
    position: relative; 
    left: -7px;
    font-size: 18px;
    margin-left: -7px;
}

You may have to adjust the padding and margin values depending on your situation.

Answer 4

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) "."; }

Answer 5

This should work:

<ol id="footnotes">
    <li><span>This is the first footnote...</span></li>
    <li><span>This is the second footnote...</span></li>
</ol>

#footnotes li { color: #f90; }
#footnotes li span { color: #000; }

Answer 6

I recently had a similar problem and found an article, Styling ordered list numbers, that describes a smart way of achieving styling of the list markers without using additional tags. The article basically says that for an ordered list:

The key is using CSS generated content to create and insert the counter numbers after removing the default numbering from the list.

For more details please see the article.