html - Continue ordered list numbering automatically -
i wonder how can have following ordered list in html
1 item 1 1a item 2 1b item 3 2 item 4 2a item 5 2b item 6 2c item 7 3 item 8
like this:
ol.number, ol.letter { list-style-type: none; } ol.number { counter-reset: number; } ol.letter { counter-reset: letter; } ol.number > li:before { content: counter(number, decimal) " "; counter-increment: number; } ol.letter > li:before { content: counter(number, decimal) counter(letter, upper-alpha) " "; counter-increment: letter; }
<ol class="number"> <li>item 1</li> <ol class="letter"> <li>item 2</li> <li>item 3</li> </ol> <li>item 4</li> <ol class="letter"> <li>item 5</li> <li>item 6</li> <li>item 7</li> </ol> <li>item 8</li> </ol>
or if you'd prefer automate counting index well:
ol.number, ol.letter { list-style-type: none; } ol.number { counter-reset: number index; } ol.letter { counter-reset: letter; } ol.number > li:before { content: counter(number, decimal) " "; counter-increment: number; } ol.letter > li:before { content: counter(number, decimal) counter(letter, upper-alpha) " "; counter-increment: letter; } ol.number li:after { content: " " counter(index, decimal); counter-increment: index; }
<ol class="number"> <li>item</li> <ol class="letter"> <li>item</li> <li>item</li> </ol> <li>item</li> <ol class="letter"> <li>item</li> <li>item</li> <li>item</li> </ol> <li>item</li> </ol>
Comments
Post a Comment