JSFiddle - React, Tailwind, and code Playground

HTML

<ol class="level1">
  <li>A
    <ol class="level2">
    <li>B
      <ol class="level3">
      <li>C
      <ol class="level4">
        <li>D</li>
      </ol> 
      </li>
      <li>C</li>
      </ol> 
    </li>
    <li>B</li>
    </ol>
  </li>
  <li>A</li>
</ol>

CSS

ol {
  list-style:none;
}

ol ol {
  margin-left: 20px;  
}

li {
  position:relative;
}

.level1 li:before {
  content:'a.';
}

.level2 li:before {
  content:'b.';
}

.level3 li:before {
  content:'c.';
}
.level4 li:before {
  content:'d.';
}

li:first-letter {
  letter-spacing: .1em;
}

li+li:first-letter {
  letter-spacing: .2em;
}


li+li:after {
  content:"'";
  position: absolute;
  left: .5em;
  width: 0;
  height: 0;  
}