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