Ordered list structure with counter-set indexing

Four-leveled structure of ordered lits with custom CSS view countdown, counter-set and UL lists integration

by atorn

HTML

<h4>Ordered list structure with counter-set, indexing from not only 1</h4>
<div class="listBg">

<ol>
	<li>Simple list with order from 1.</li>
	<li>2nd item.</li>
</ol>
<div class="ol o3"> <!-- class of order index -->
<ol>
	<li>Example of the next list ordered from 3.</li>
	<li>item ordered 4.
	<ol>
		<li>(needed empty item if next nested div is present). <a href="#" onclick="this.parentNode.style.display='none';return!1">Hide this</a></li>
	</ol>
	<div class="oReverse o5"><!-- class of reversed order index -->
	<ol>
		<li>Level 2 invesed order with first item number 3.</li>
		<li>Level 2 2nd item number 2.</li>
		<li>Level 2 3rd item number 1.</li>
	</ol>
	</div>
	</li>
	<li>Order 5.</li>
	<li>
	<ol>
		<li>Level 2 order 1.</li>
		<li>
		<ol>
			<li>Level 3 (usual OL) order 1.</li>
			<li>Level 3 order 2.</li>
		</ol>
		</li>
	</ol>
	<div class="ol o12"><!-- order index 12 -->
	<ol>
		<li>Level 2 order 12 (started by external div class).
		<ol>
			<li>Level 3 (usual OL) order 1.</li>
			<li>Level 3 (usual OL) order 2.</li>
		</ol>
		<div class="ol o5"><!-- order index 5 in level 3 -->
		<ol>
			<li>Level 3 1st item order 5 (started by external div class).
			<ol>
				<li>Level 4 1st item, usual order 1</li>
				<li>Level 4 2nd item order 2</li>
			</ol>
			</li>
			<li>Level 3 2nd item order 6</li>
		</ol>
		</div>
		</li>
		<li>Level 2 order 13</li>
	</ol>
	</div>
	<ul>
		<li>Level 2 UL
		<ul>
			<li>Level 3 UL-UL</li>
		</ul>
		</li>
	</ul>
	</li>
	<li>Order 7.</li>
</ol>
</div>

</div>
<br>
<a href="https://caniuse.com/?search=counter-set" target=_blank>caniuse.com/?search=counter-set 🡕</a>

SCSS

ul, ol, ul li, ol li {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul ul, ol ol, ol ul, ul ol {
  padding-left: 1em;
}

ol > li > ol:only-child {
  padding-left: 1.2em;
}
ol>li {
    list-style: none;
    list-style-type: decimal;
    list-style-position: inside;
    padding-left: .5em;
    text-indent: 1.1em;
}
ol {
  counter-reset: l;
  &> li {
    counter-increment: l;
    display: -ms-grid;
    display: flow-root;
    position: relative;
  }
  &>li::before { // counters with numbered lists
    content: counters(l, '.') ')';
    position: absolute;
    z-index: 104;
    top: 0;
    left: -0.625em;
    width: 1.7em;
    height: 1em;
    padding-right: 0.0625em;
    text-indent: -0.5em;
    white-space: nowrap;
    line-height: 1.2em;
    line-height: var(--ashLineH);
    text-align: right;
    font-family: Segoe UI, 'Roboto', Arial, Helvetica, sans-serif;
    font-size: 84%;
    border: .1875em solid #fff;
    border-radius: 0.7em;
    background-color: #e0e5e6;
    color: #34343a;
  }
  ol >li::before { // more wide field for Level 3 indexes
    z-index: 103;
    width: 2.2em;
    margin-left: -0.7em;
    padding-left: 0.4em;
  }
}
.o0>ol {counter-set: l -1}
.o1>ol {counter-set: l 0}
.o2>ol {counter-set: l 1}
.o3>ol {counter-set: l 2}
.o4>ol {counter-set: l 3}
.o5>ol {counter-set: l 4}
.o6>ol {counter-set: l 5}
.o7>ol {counter-set: l 6}
.o8>ol {counter-set: l 7}
.o9>ol {counter-set: l 8}
.o10>ol {counter-set: l 9}
.o11>ol {counter-set: l 10}
.o12>ol {counter-set: l 11}
.o13>ol {counter-set: l 12}
.o14>ol {counter-set: l 13}
.o15>ol {counter-set: l 14}
.o16>ol {counter-set: l 15}
.o17>ol {counter-set: l 16}
.o18>ol {counter-set: l 17}
.o19>ol {counter-set: l 18}
.o20>ol {counter-set: l 19}
.o21>ol {counter-set: l 20}
.o22>ol {counter-set: l 21}
:root .oReverse>ol,
:root .ol>ol {counter-reset: auto}
.oReverse>ol>li {counter-increment: l -1}
ol ol ol {
  >li:before {
    z-index: 102;
    width: 2.6em;
    margin-left: -1.2em;
    padding-left: 1.0em;
   ...