JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li data-number="1">One</li>
  <li data-number="2">Two</li>
  <li data-number="3">Three</li>
</ul>

SCSS

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  li {
    display: inline-block;
    padding-left: 45px;
    position: relative;
    &:after {
      content:attr(data-number);
      display: flex;
      align-items:center;
      justify-content:center;
      font-weight: 900;
      position: absolute;
      left: 0;
      top: 0px;
      height: 20px;
      width: 20px;
      border-radius:50%;
      background-color:green;
      color:#fff;
    }
  }
  li + li {
    margin-left: 25px;
  }
}