CSS: Separate styles for list text markers?

Question

css

There is a list:

&lt;ol&gt;<br/>
&lt;li&gt;First&lt;/li&gt;<br/>
&lt;li&gt;Second&lt;/li&gt;<br/>
&lt;/ol&gt;

1. First
   
2. Second
   

Is it possible to somehow apply css rules to the markers themselves to make them, say, bolder and redder?

Answer 1

CSS3 has the ::marker pseudo-element.
In CSS2.1, you can do something like this:

ol {
    counter-reset: li;
}
ol > li {
    list-style:none;
    position: relative;
}
ol > li:before {
    content:counter(li);
    counter-increment:li;
    position: absolute;
    left: -2em;

    color: red;
    font-weight: bold;
}

In IE < 8, something like this would work with additional markup, but IE is not at hand:

<ol>
<li><p> First
<li><p> Second
</ol>

ol {
   color: red;
   font-weight: bold;
}
ol p {
   color: black;
   font-weight: normal;
}