JSFiddle - React, Tailwind, and code Playground

HTML

<ol class="circle"> 
                        <li class="li">item</li> 
                        <li class="li">item</li> 
                        <li class="li">item</li> 
                        <li class="li">item</li> 
                    </ol>

CSS

.circle {
    list-style: none;
    counter-reset: item;
    vertical-align: middle;
  }
 
.li {
    counter-increment: item;
    margin-left: 0.5em;
    margin-top: 3em;
    margin-bottom: 3em;
    vertical-align: middle;
  }
 
.circle > li:before {
    background-color: #a879e198;
    color: #a2a2a2 !important;
    content: counter(item);
    border-radius: 100%;
    margin-right: 1em;
    top: 50%;
    height: 3em;
    width: 3em;
    text-align: center;
    display:inline-block;
}

.circle > li:hover::before {
    box-shadow: 0 0 0 3px #a879e14b;
}