Report section style list numbering in CSS?

Question

Now I know about the "normal" CSS list styles (roman, latin, etc) and certainly in years past they were somewhat inflexible in not allowing things like:

(a)

or

a)

only

a.

Now I believe that you can get an effect like the above with the :before and :after pseudo-elements. Is that correct? And whats the browser compatibility like if you can?

My main question however is that I want to have report style numbering:

1. Introduction 1.1 Objectives 1.2 Assumptions 1.3 Limitations 1.3.1 ...
2. New Section ...

and so on.

Can CSS do this and, if so, whats the browser compatibility like?

Answer 1

See Generated content, automatic numbering, and lists.

This example shows a way to number chapters and sections with "Chapter 1", "1.1", "1.2", etc.

H1:before {
    content: "Chapter " counter(chapter) ". ";
    counter-increment: chapter;  /* Add 1 to chapter */
    counter-reset: section;      /* Set section to 0 */
}
H2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}

Edit: quirksmode.org has a better table of css supports on browsers. Almost all browsers, except pre IE8b2 IEs. So yes, totally useless.

Answer 2

Here's the W3C specification for CSS2's automatic numbering and incrementing, with an example of 1.1, 1.2, 1.3 type numbering.

http://www.w3.org/TR/CSS2/generate.html#counters

I can't help you with the support question.