JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="numeric">
  <li>lorem ipsum</li>
  <li>lorem ipsum</li>
  <li>lorem ipsum</li>
  <li>lorem ipsum</li>
  <li>lorem ipsum</li>
  <li>lorem ipsum</li>
  <li>lorem ipsum</li>
  <li>lorem ipsum</li>
  <li>lorem ipsum</li>
</ul>

CSS

ul.numeric {float:left; width:100%; list-style-type:none; position:relative;}
ul.numeric li {position:relative; padding-left:40px; line-height:40px;}
    ul.numeric li:after {    content: '';    position: absolute;    display: inline-block;    top: 0;    left: 3px;    line-height: 32px;    width: 32px;    height: 32px;    padding: 0;    background: url(/Images/star-yellow.png) left center no-repeat;    background-size: 100%;    font-size: 18px;    text-align: center;    color: #565656;    font-family: Georgia, sans-serif;}
    ul.numeric li:first-child:after {content:'1';}
    ul.numeric li:nth-child(2):after {content:'2';}
    ul.numeric li:nth-child(3):after {content:'3';}
    ul.numeric li:nth-child(4):after {content:'4';}
    ul.numeric li:nth-child(5):after {content:'5';}
    ul.numeric li:nth-child(6):after {content:'6';}