Does "display: marker" work in any current browsers, and if so, how?

Question

I can't be sure if my code is sucking, or if it's just that the browsers haven't caught up with the spec yet.

My goal is to simulate list markers using generated content, so as to get e.g. continuation of the counters from list to list in pure CSS. So the HTML is like this:

<ol>
 <li>The<li>
 <li>quick</li>
 <li>brown</li>
</ol>
<ol>
 <li>fox</li>
 <li>jumped</li>
 <li>over</li>
</ol>

and the CSS, which I think is correct according to the spec, is like this:

html { counter-reset: myCounter; }
li { counter-increment: myCounter; }
li:before { content: counter(myCounter)". "; display: marker; width: 5em; text-align: right; marker-offset: 1em; }

But this doesn't seem to generate markers, in either FF3, Chrome, or IE8 beta 2, and if I recall correctly not Opera either (although I've since uninstalled Opera).

So, does anyone know if markers are supposed to work? Quirksmode.org isn't being its usual helpful self in this regard :(.

Answer 1

Apparently marker was introduced as a value in CSS 2 but did not make it to CSS 2.1 because of lacking browser support. I suppose that didn’t help its popularity …

Source: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display (German)

Answer 2

Oh ouch, did not know that :-|. That probably seals its case, then. Because mostly I was under the assumption that such a basic CSS2 property should definitely be supported in modern browsers, but if it didn't make it into CSS 2.1, then it makes a lot more sense that it isn't.

For future reference, it doesn't show up in the Mozilla Development Center, so presumably Firefox doesn't support it at all.

Also for future reference, I got my original example to work with inline-block instead:

li:before
{
    content: counter(myCounter)". ";
    display: inline-block;
    width: 2em;
    padding-right: 0.3em;
    text-align: right;
}