Как правильно сделать прогресс выполнения как в макете?

Question

[Петр]

Добрый день.
Помогите решить задачку.
В тренировочном макете попался вот такой прогресс выполнения заказа

Прогресс

Вот мои попытки решить эту задачу https://jsfiddle.net/Morpheus_God/pqvd43cr/20/
Но не получается расставить пункты. А еще если добавить текст как в макете так вообще все едет.

Answer 1

[Ivan Bogachev]

Посмотрите вот этот пример:

Он по сути похож на вашу задачу (если убрать четные пункты и немного стилизовать псевдоэлементы).

Comments

[Петр]

Спасибо:) Что подобное будет дальше.

Answer 2

[Владимир Сартаков]

https://jsfiddle.net/pqvd43cr/22/

Comments

[Петр]

И вам спасибо:)