css counter-increment demo

by Tenderfeel

HTML

<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Cras finibus urna a ipsum pulvinar fringilla ut ut leo.
  <ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li>Cras finibus urna a ipsum pulvinar fringilla ut ut leo.</li>
  <li>Fusce vel ex id odio tristique bibendum eget scelerisque neque.</li>
  </ol>
</li>
<li>Fusce vel ex id odio tristique bibendum eget scelerisque neque.</li>
<li>Mauris ultrices ipsum id felis porttitor, id sollicitudin metus venenatis.</li>
<li>Mauris sit amet erat ut nibh condimentum porta.
  <ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li>Cras finibus urna a ipsum pulvinar fringilla ut ut leo.</li>
  <li>Fusce vel ex id odio tristique bibendum eget scelerisque neque.</li>
  </ol>
</li>
<li>Vestibulum quis diam dapibus, facilisis neque ac, elementum eros.</li>
<li>Quisque eu urna in felis condimentum tincidunt eget et leo.</li>
</ol>

CSS

ul,ol {
  list-style: inherit;
  margin: 20px;
}

li {
  line-height: 1.3;
  margin: 20px 0;
  vertical-align: top;
}

ol > li {
  list-style-type: decimal;
}
ol > li > ol {
  margin-left: 0;
}
  
ol > li > ol > li {
  counter-increment: counterListInc;
  list-style: none;
 }

ol > li > ol > li:before {
  content: "("counter(counterListInc, decimal)")";
  display: inline-block;
  text-align: center;
}