JSFiddle - React, Tailwind, and code Playground

by Douglas Santos

HTML

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

CSS

li {
    float: left;
    width: 24px;
    height: 24px;
    list-style: none;
    background-color: #FF00FF;
    border-radius: 24px;
    text-align: center;
    margin-right: 60px;
}
    
li:before {
    content: '';
    background-color: #ddd;
    width: 50px;
    height: 3px;
    float: left;
}