JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><div class="number">1</div></li>
    <li><div class="number">2</div></li>
    <li><div class="number">3</div></li>
</ul>

CSS

ul {
    overflow: hidden;
    position: relative;
    display: inline-block;
}

ul:after {
    content: '';
    height: 1px;
    background: #ccc;
    position: absolute;
    left: 24px;
    right:24px;
    top: 50%;
}

ul li {
    max-width: 400px;
    margin: 20px;
    text-align: center;
    float: left;
}
.number {
	height: 48px;
	width: 48px;
	background: #fff;
	border: 2px solid #b0dff7;
	border-radius: 50%;
	line-height: 45px;
    position: relative;
    z-index: 2;
}