JSFiddle - React, Tailwind, and code Playground

by hyvyys

HTML

<ol reversed class="bracket">
  <li>First item</li>
  <li>Second item</li>
  <li>third item</li>
  <li>fourth item</li>
</ol>


<ol reversed class="bracket">
  <li>First item</li>
  <li>Second item</li>
  <li>third item</li>
  <li>fourth item</li>
  <li>fifth item</li>
  <li>sixth item</li>
</ol>

CSS

ol.bracket {
  /* set in JS */
  /* counter-reset: list 5; */
}

ol.bracket>li {
  list-style: none;
  position: relative;
}

ol.bracket>li:before {
  counter-increment: list -1;
  content: "[" counter(list) "]  ";
  position: absolute;
  left: -2em;
}

JavaScript

document.querySelectorAll('.bracket')
  .forEach(list => {
  	const c = list.querySelectorAll('li').length + 1;
  	list.style.counterReset = `list ${c}`;
  });