<ol class="c-stepper">
<li class="c-stepper__item">
<h3 class="c-stepper__title">Step 1</h3>
<p class="c-stepper__desc">Some desc text</p>
</li>
<li class="c-stepper__item">
<h3 class="c-stepper__title">Step 2</h3>
<p class="c-stepper__desc">Some desc text</p>
</li>
<li class="c-stepper__item">
<h3 class="c-stepper__title">Step 3</h3>
<p class="c-stepper__desc">Some desc text</p>
</li>
</ol>
.c-stepper {
display: flex;
flex-warp: warp;
padding: 0;
}
.c-stepper__item {
display: flex;
flex-direction: column;
text-align: center;
flex: 1;
}
.c-stepper__item:before {
--size: 3rem;
content: '';
width: var(--size);
height: var(--size);
border-radius: 50%;
background-color: red;
opacity: 0.5;
margin: 0 auto;
}
.c-stepper__item:not(:last-child):after {
content: '';
position: relative;
height: 2px;
background-color: #e0e0e0;
top: 1.5rem;
left: calc(50% + 1.5rem + 8px);
width: calc(100% - 3rem - 8px - 8px);
order: -1;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.