<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.