On Sun, May 1, 2011 at 3:53 PM, Christoph Päper
<christoph.paeper@crissov.de> wrote:
> Tab Atkins Jr.:
>> <ol>
>> <li><span class=marker>A.</span> foo
>> <li><span class=marker>B.</span> bar
>> </ol>
>>
>> .marker { display: marker; }
>> ol { list-style-type: inline; }
>
> Should this or something like it work, too?
>
> <ol>
> <li value="A."> foo
> <li value="B."> bar
> </ol>
>
> li[value]::before {content: attr(value); display: marker; }
> ol { list-style-type: inline; }
To expand on what I said, please don't do this. It's unnecessary
complicated for no reason, as far as I can tell. If you need the
marker to be part of the content, so it's robust against CSS failure,
do this:
<ol>
<li><span>A.</span> foo
<li><span>B.</span> bar
</ol>
<style>
ol { list-style: none; list-style: inline inside; }
li > span { display: marker; }
</style>
This is robust against CSS failure (you'll just get both a number and
an inline marker), and against a reasonable set of non-supporting
browsers. You can also use a different list-style-position value and
emulate it by positioning the span, if you don't want "inside".
If the marker doesn't have to be part of the content, just do this:
<ol>
<li>foo
<li>bar
</ol>
<style>
ol { list-style: upper-alpha; list-style: my-counter; }
</style>
This is similarly robust. In the case of CSS failure, the <ol> will
render as 'decimal' (the default). In the case of non-supporting
browsers, it'll get upper-alpha, which I'm assuming is the closest 2.1
equivalent to your style. In supporting browsers, you get exactly
what you want.
~TJ