<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
ul {
padding: 0;
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 30px;
position: relative;
}
ul:before {
content:'';
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -1px;
height: 2px;
background-color: turquoise;
}
li {
list-style: none;
background-color: turquoise;
position: relative;
color: #fff;
font-weight: 700;
font-family: arial;
display: flex;
align-items: center;
justify-content: center;
height: 40px;
width: 40px;
flex: 0 0 40px;
border-radius: 50%;
transition: .2s;
cursor: pointer;
}
li:hover {
box-shadow: 0 0 15px 4px turquoise;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.