JSFiddle - React, Tailwind, and code Playground

by Daniel Tan

HTML

<ol>
    <li>Level 1 - should be '1.'</li>
    <li>Level 1 - should be '2.'
      <ol>
        <li>Level 2 - Should be '2.1'</li>
        <li>Level 2 - Should be '2.2'
          <ol>
            <li>Level 3 - Should be '2.2.1'</li>

            <li>Level 3 - Should be '2.2.2'</li>
          </ol>
        </li>
      </ol>
    </li>
    <li>Level 1 - should be '3.'
      <ol>
        <li>Level 2 - Should be '3.1'</li>
      </ol>
    </li>
</ol>

CSS

ol {
    list-style: none; 
    font: 11px arial; 
    margin: 0px 0px 0px 10px; 
    padding: 0;
    counter-reset: num;
}

ol li:before {
    content: counter(num) '. ';
    counter-increment: num;
}

ol ol li:before {
    content: counters(num, '.') ' ';
}