<ol class="stepper">
   <li>Step A</li>
   <li class="active">Step B</li>
   <li>Step C</li>
   <li>Step D</li>
</ol>

<ol class="stepper">
   <li>Step A</li>
   <li>Step B</li>
   <li class="active">Step C</li>
   <li>Step D</li>
   <li>Step E</li>
</ol>

ol.stepper {
  --default-b: lightgrey;
  --default-c: black;
  --active-b: purple;
  --active-c: white;
  --circle: 3.5em; /* size of circle */
  --b: 5px; /* line thickness */
  
  display: flex;
  list-style: none;
  justify-content:space-between;
  counter-reset: step;
  margin: 20px;
  padding: 0;
  font-size: 22px;
  font-weight: bold;
}