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

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

python - How to create jsonb index using GIN on SQLAlchemy? -

c# - TransactionScope not rolling back although no complete() is called -