JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>
    <span class="parent">
      <span class="child">Nested span with overflow: hidden</span>
    </span>
  </li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

CSS

ol {
  counter-reset:ol-li;
  }
li {
counter-increment:ol-li;
  display:block;
  }

li:before {
  content:counter(ol-li)'. ';
  float:left;
  width:1em;
  text-align:right;
  margin-right:0.25em;
  }
.parent {
  display: block;
}

.child {
  display: block;
  overflow: hidden;
}