JSFiddle - React, Tailwind, and code Playground

by sandeep

HTML

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine<br>Items</li>
  <li>Ten<br>Items</li>
</ul>

CSS

ul {
    counter-reset: item;
    margin-left: 0;
    padding-left: 0;
}
li {
    display: block;
    margin-bottom: .5em;
    margin-left: 2em;
    position:relative;
}
li:before {
    display:block;
    content: counter(item);
    counter-increment: item;
    width:20px;
    height:18px;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    background:red;
    text-align:center;
    position:absolute;
    top:2px;
    left:-30px;
    padding-top:2px;
}