Как верстать такие степы в попапе?

Question

[HelpMeeee]

Привет!
Для опросника нужно сверстать степы(прогресс бар), как это можно сделать?

Comments

[Ankhena]

Что именно у вас не получается?

Если у них нет функциональности, то это просто 6 span'ов, у пяти из которых псевдоэлементы "палочкой".

[HelpMeeee]

Ankhena, Не получается сделать псевдоэлементы палочкой, у них высота кружка остается.
Для кружков использовал display: flex and space-between

Answer 1

[Sergey]

Вот по-быстрому накидал. Соответственно, у того элемента, у которого стоит класс active фон белый с обводкой красной, слева красные, справа серые. Если класса active нет вообще, считай, что путь пройден/завершен. Если задача в процессе, то хотя бы один элемент должен быть с классом active, а то иначе смысл тогда ...

Answer 2

[Алексей Скляров]

Дивы с :before, :after

Comments

[HelpMeeee]

Можно пример какой-то? А то у меня так и не получается :(