Continue Ordered List Numbering Automatically

I wonder how I can have the 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

Solution 1:

Like this:

ol.number, .letter > ol {
  list-style-type: none;
}  

ol.number {
  counter-reset: number;
}

.letter > ol {
  counter-reset: letter;
}

ol.number > li:not(.letter):before {
  content: counter(number, decimal) " ";
  counter-increment: number;
}

.letter > ol > li:before {
  content: counter(number, decimal) counter(letter, upper-alpha) " ";
  counter-increment: letter;
}

<olclass="number"><li>Item 1</li><liclass="letter"><ol><li>Item 2</li><li>Item 3</li></ol></li><li>Item 4</li><liclass="letter"><ol><li>Item 5</li><li>Item 6</li><li>Item 7</li></ol></li><li>Item 8</li></ol>

Or if you'd prefer to automate counting the index as well:

ol.number, .letter > ol {
  list-style-type: none;
}  

ol.number {
  counter-reset: number index;
}

.letter > ol {
  counter-reset: letter;
}

ol.number > li:not(.letter):before {
  content: counter(number, decimal) " ";
  counter-increment: number;
}

.letter > ol > li:before {
  content: counter(number, decimal) counter(letter, upper-alpha) " ";
  counter-increment: letter;
}

ol.numberli:not(.letter):after {
  content: " "counter(index, decimal);
  counter-increment: index;
}

<olclass="number"><li>Item</li><liclass="letter"><ol><li>Item</li><li>Item</li></ol></li><li>Item</li><liclass="letter"><ol><li>Item</li><li>Item</li><li>Item</li></ol></li><li>Item</li></ol>