<ol class="c-stepper">
<li class="c-stepper__item">
<h3 class="c-stepper__title">Step 1</h3>
</li>
<li class="c-stepper__item">
<h3 class="c-stepper__title">Step 2</h3>
</li>
<li class="c-stepper__item">
<h3 class="c-stepper__title">Step 3</h3>
</li>
</ol>
.c-stepper {
display: flex;
flex-wrap: wrap;
}
.c-stepper__item {
display: flex;
gap: 0.5rem;
align-items: center;
}
.c-stepper__item:before {
content: '';
display: block;
width: 3rem;
height: 3rem;
border-radius: 50%;
background-color: red;
opacity: 0.5;
}
.c-stepper__item:not(:last-child) {
flex: 1;
}
.c-stepper__item:not(:last-child):after {
content: '';
display: block;
flex: 1;
margin-inline-end: 0.5rem;
height: 2px;
background-color: #e0e0e0;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.