Как сверстать такое на чистом CSS?

Question

[Dave]

Есть такой пошаговый прогресс в мастере:



Нужно сверстать на чистом CSS в такой структуре:

<ul>
   <li class="active"><span>1</span> Выбор карты</li>
   <li><a href="#"><span>2</span> Личные данные</a></li>
   ....
</ul>

Пробую через бордеры и li:after, li:before, но всё не то и все криво получается... Прошу помощи.

Answer 1

[Aleksey Chernikov]

https://codepen.io/jessabean/pen/LFlzH