Comments on: counter-reset https://css-tricks.com Tips, Tricks, and Techniques on using Cascading Style Sheets. Wed, 28 Sep 2022 17:01:01 +0000 hourly 1 https://wordpress.org/?v=6.6.1 By: megadroid https://css-tricks.com/almanac/properties/c/counter-reset/#comment-686844 Thu, 21 Nov 2013 14:45:38 +0000 http://css-tricks.com/?page_id=14035#comment-686844 In reply to megadroid.

Numbering In Style

list-style-type: decimal-leading-zero;

Doh!

]]> By: megadroid https://css-tricks.com/almanac/properties/c/counter-reset/#comment-677009 Mon, 18 Nov 2013 20:08:52 +0000 http://css-tricks.com/?page_id=14035#comment-677009 In reply to megadroid.

OK, the numbers are removed after the comment is posted. On my PS above, I meant typing ordered lists in Markdown on the comments. Cheers.

1. one
2. two
...
10. ten
11. eleven
]]> By: megadroid https://css-tricks.com/almanac/properties/c/counter-reset/#comment-676999 Mon, 18 Nov 2013 20:05:38 +0000 http://css-tricks.com/?page_id=14035#comment-676999 Always learn a lot from CSS-Tricks.
With counter-reset and this useful nth-child tip, I was able to make double digit ordered lists.

With something along these lines…

ol {
    counter-reset: li;
}

ol > li::before {
    content: counter(li);
    counter-increment: li;
    margin-right: 10px;
    line-height: 0;
}

ol > li:nth-child(-n+9)::before { /* 1 - 9 */
    content: "0" counter(li); /* becomes 01 - 09 */
}

I get the output:

01 one
02 two
03 three
04 four
05 five
06 six
07 seven
08 eight
09 nine
10 ten

PS: Chris, you need to fix the padding on your ordered lists (gets cut off starting with double digits):

one
two
three
four
five
six
seven
eight
nine
ten
eleven
twelve
thirtheen

]]> By: Aaron Hall https://css-tricks.com/almanac/properties/c/counter-reset/#comment-507929 Thu, 08 Aug 2013 01:44:51 +0000 http://css-tricks.com/?page_id=14035#comment-507929 Very useful! Thanks!!!

]]>