A styled ordered list whose nested list should have numbers with letters using CSS counter property

Question

I want to add a letter to an

-element from a my under

like from my question:

Answer 1

Try this out:

ol.main {
  counter-reset: item;
}
ol.main li {
  counter-increment: item;
}
ol.numbered_style li:before {
  margin-bottom: 5px;
  margin-right: 10px;
  content: counter(item);
  background: blue;
  border-radius: 100%;
  color: white;
  width: 1.2em;
  text-align: center;
  display: inline-block;
}
ol.numbered_style ol.numbered_style li {
  counter-increment: subitem;
}
ol.numbered_style ol.numbered_style li:before {
  content: counter(item) counter(subitem, lower-alpha);
}
ol.none,
ul.none,
ol.numbered_style {
  list-style: none;
}

  
first
  
second
  
third Lorem Ipsum
    

      
missing an a after the number
      
missing a b after the number
      
missing a c after the number
    
  





  
first
  
second
  
third Lorem Ipsum
    

      
missing an a after the number
      
missing a b after the number
      
missing a c after the number