Geek Answers Handbook

Can we get the default counter value for li?

Is it possible to get the default counter value for li in CSS ?

For instance:
If I have 6 <li> divided by 2 <ol> , but I want <li> be specified from 1 to 6, and not from 1 to 3 twice. I used value="4" in the first <li> second <ol> , so it worked, but now, since I use

 ol { counter-reset: i 0; } ol li:before { content: counter(i); counter-increment: i; font-weight: bold; }​

content: counter(i); ignore value="4" in the first <li> second <ol> .

Can I do something about this?

View on JsFiddle

+2
source share
2 answers

Does this fit your needs? View in JSFiddle

HTML

 <ol> <li>test</li> <li>test</li> <li>test</li> </ol> <ol> <li>test</li> <li>test</li> <li>test</li> </ol>

CSS

 ol:first-of-type { counter-reset: i 0; } ol li:before { content: counter(i); counter-increment: i; font-weight: bold; }​
+3
source

Found, I just need to do a counter-reset for the parent instead of all the <ol>
Show an example for more details.

+1
source

More articles:


All Articles