Hello, I am creating a table of content like:
sectionNumber: sectionTitle ..... page
Here is my css code:

*********************************************
h1:before {
counter-increment:section;
content:counter(section) ". " " ";
}

#toc a.h1:before {
content: target-counter(attr(href, url), section) ". ";
}
**********************************************
h1:before part works fine in the document. However, the TOC starts with section number 0 instead of 1.

Can anybody please help me?

Thanks
Diana

Can you apply counter-reset on the TOC element?

I tried using another set of counter for TOC element, but they all appear to be 1, even from a browser.
I reset the sectionNo counter in the body, In
#toc a.h1:before {
counter-increment:sectionNo;
content:counter(sectionNo) ". ";
}

Can you please attach a sample document demonstrating the problem?

Hi I am attaching a simple html file with style inside, in which, I am using
content: target-counter(attr(href, url), section) ". ";
for numbering in the TOC. You can see the number is off by 1, starting with 0.

Thanks
Diana

1. princeToc.html‎ 3.3 kB
2. princeToc.pdf‎ 51.6 kB

Thanks, if you move the counter-increment rules from the h1:before to the h1 (and similarly for h2) that should fix the problem.

The issue here is that ::before/::after pseudo-elements are essentially the first/last child of the element in question. This means that the counter is not incremented until the h1:before is reached, which is after the h1 itself has already been processed.

It worked! Thanks!