HTML and CSS Reference
In-Depth Information
Again, only the newcomers Firefox and Opera properly display styles-
generated counters and content.
8.4.11.6. Creating markers
According to the CSS2 standard, the browser should place styles-gen-
erated content before or after the conventional HTML/XHTML content of
the affected element, and it should therefore become part of the ele-
ment's flow. This is not acceptable for numbered lists, where the num-
ber should be displayed separate from the content of each numbered
item. To do this, add the
display
property to your generated content,
with the special value of
marker
. To make our nested numbered list ex-
ample completely correct, for instance, we use the rules:
ul { counter-reset: item }
li:before { display : marker;
counter-increment: item ;
content: counters(item, ".") }
This way, the generated counter number gets rendered to the left of the
element's actual content. In a similar fashion, you can place markers
after an element. For example, use the following properties to create
numbered equations within chapters (the
<blockquote>
element delin-
eates the equation):
h1:before { counter-increment : chapter;
counter-reset : equation }
blockquote:after { counter-increment : equation;
display : marker;
content : "("counter(chapter, upper-roman) "-" counter(equation) ")" }
When rendering a marker, the browser determines where to place the
marker content in relation to the element's actual content. You modi-
fy this behavior with the
marker-offset
property. It accepts a numerical
