JSFiddle - React, Tailwind, and code Playground

HTML

<ol class="parented">
  <li>Value 1<ol>
    <li>Value 1.1</li>
    <li>Value 1.2</li>
    <li>Value 1.3</li>
  </ol></li>
  <li value="4">Value 4<ol>
    <li>Value 4.1</li>
    <li>Value 4.2</li>
    <li>Value 4.3</li>
  </ol></li>
  <li>Value 5<ol>
    <li>Value 5.1</li>
    <li>Value 5.2</li>
    <li>Value 5.3</li>
  </ol></li>
  <li>Value 6<ol>
    <li>Value 6.1</li>
    <li>Value 6.2</li>
    <li>Value 6.3</li>
  </ol></li>
  <li value="10">Value 10<ol>
    <li>Value 10.1</li>
    <li>Value 10.2</li>
    <li>Value 10.3</li>
  </ol></li>
</ol>

CSS

ol.parented {
  margin-left: .6875em !important;
}
ol.parented, .parented ol {
  list-style: none !important;
}
ol.parented > li:before, ol.parented ol li:before {
  padding-right: 9px;
}

JavaScript

window.onload = function() {
  var lists = document.getElementsByClassName('parented');
  for(var i = 0; i < lists.length; i++) {
    var test = lists[i].getElementsByTagName('li'), parent = [], cparent = 0, j = 0;
    for(var k = 0; k < test.length; k++) {
      if((test[k].getElementsByTagName('ol').length + test[k].getElementsByTagName('ul').length) != 0) {
        parent.push(test[k]);
        k++;
      }
    }
    var style = document.createElement('style');
    style.id = 'parented';
    document.head.appendChild(style);
    style = document.getElementById('parented');
    for(var k = 0; k < parent.length; k++) {console.log(cparent);
      var pnum = (parent[k].hasAttribute('value') ? parent[k].getAttribute('value') : (parseInt((k < cparent) ? cparent : k) + 1));
      cparent = pnum;
      var child = parent[k].getElementsByTagName('li'), rule = 'parent' + (i + 1) + pnum, content = pnum;
      style.innerHTML = style.innerHTML + '.' + rule + '::before { content: "' + content + '."; }';
      parent[k].className = rule;
      for(var l = 0; l < child.length; l++) {
        rule = 'parent' + (i + 1) + pnum + (l + 1);
        content = pnum + '.' + (l + 1);
        style.innerHTML = style.innerHTML + '.' + rule + '::before { content: "' + content + '"; }';
        child[l].className = rule;
      }
    }
  }
}