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

These days you can just use ::marker;

Example:

li::marker {
  color: #f90;
}

More here, including the browser compat table: https://developer.mozilla.org/en-US/docs/Web/CSS/::marker#Browser_compatibility

Answer 2

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 3

Well, the kicker is that the numbers are technically generated inside the <li>, so anything you do to the <li> will affect the number. From the spec:

"Most block-level elements in CSS generate one principal block box. In this section, we discuss two CSS mechanisms that cause an element to generate two boxes: one principal block box (for the element's content) and one separate marker box (for decoration such as a bullet, image, or number)."

Notice that both the marker box and the principal box belong to the same element - in this case, the list item. Accordingly, we should expect all <li> styling to apply to both the marker and the content. This is also not surprising if you think about it as though the list item itself is generating the numbering content (which effectively it is doing in CSS terms). This is confirmed later on when the spec continues:

"The list properties allow basic visual formatting of lists. As with more general markers, a element with 'display: list-item' generates a principal box for the element's content and an optional marker box. The other list properties allow authors to specify the marker type (image, glyph, or number) and its position with respect to the principal box (outside it or within it before content). They do not allow authors to specify distinct style (colors, fonts, alignment, etc.) for the list marker or adjust its position with respect to the principal box."

So because the marker belongs to the list, it is affected by the <li> styling and isn't adjustable directly. The only way to achieve a different styling for the marker is to insert a <span> inside the list item, and style the span with the properties you want to be different from the marker.

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

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.

Answer 6

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 7

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

Answer 8

How about this?

<head>
  <style>
    #footnotes li { color: #f90; }
    #footnotes li a { color: #000; }
  </style>
</head>
<body>
  <ol id="footnotes">
    <li><a name="footnote1">This is the first footnote...</a></li>
    <li><a name="footnote2">This is the second footnote...</a></li>
  </ol>
</body>

Answer 9

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