Forum How do I...?

using counter() is string-set

dsusco
I have three counters for my top three headings. I'm trying to get the current h1's content, and its counter in the header of pages. However, counter(h1) always evaluated to 0. See my comments below:

body { counter-reset: h1 h2 h3; }

h1 {
counter-reset: h2 h3;
string-set: section counter(h1) ' ' content(); /* "0 Header 1": why is it 0? */
}
h1:before {
counter-increment: h1;
content: counter(h1) '.0 ';
}

h2 { counter-reset: h3; }
h2:before {
counter-increment: h2;
content: counter(h1) '.' counter(h2) ' ';
}

h3:before {
counter-increment: h3;
content: counter(h1) '.' counter(h2) '.' counter(h3) ' ';
}

@page {
@top-center {
content: string(section); /* when I used counter(h1) here it was 0 too */
}
}
dsusco
Figured it out, I just moved the string-set from the h1 to the h1:before

h1 {
counter-reset: h2 h3;
}
h1:before {
counter-increment: h1;
content: counter(h1) '.0 ';
string-set: section counter(h1) '.0 ' content();
}
mikeday
I think you need to apply the string-set to the h1::before, otherwise it will be evaluated on the h1, before the counter-increment inside the ::before is evaluated, leaving it 0.

It's a bit confusing, but the ::before and ::after pseudo-elements actually occur inside the element, as the first and last child respectively, which you can see if you put borders around them and the element. There have been suggestions to add ::outside::before and various other ideas to CSS, which would allow you to do more things at the risk of even more confusion, but none of these have made it into the spec yet.