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

Question

I'm using the following list:

<ol id="footnotes">     <a name="footnote1"><li></a>This is the first footnote...</li>     <a name="footnote2"><li></a>This is the second footnote...</li> </ol> 

With the following .css:

#footnotes {list-style-type: decimal;             list-style-color: #f90;             }  #footnotes li            {color: #000;             }  #footnotes a li, #footnotes li a            {color: #f90;             } 

The aim is to have the li/footer text itself black (#000), and the number styled to orange (#f90).

I've tried using the list-style-color property but this does nothing except upset the Web developer toolbar (in FF3.0.8/Ubuntu 8.04), Midori similarly doesn't display the number in orange (I thought I'd try it in the Webkit engine, just in case...).

Any ideas?

Edited the HTML (since I remembered that the tag doesn't necessarily need to enclose anything to function as an anchor):

<ol id="footnotes">     <li><a name="footnote1"></a>This is the first footnote...</li>     <li><a name="footnote2"></a>This is the second footnote...</li> </ol> 

In response to those that suggest using a <span> inside the <li>...yeah. That occurred, though I thank you for the suggestions and the time taken, but I was looking (li'l standardista that I am... ;) ) for a more...semantic option.

As it is, I think I'll probably use that approach. Though I accepted a different, Pete Michaud's, answer due to its sheer informative nature. Thanks!

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

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; }