Как сверстать верткальный steps bar?

Question

[Дмитрий Сергеев]

Помогите пожалуйста, не могу врубиться как правильно сверстать такой steps bar.

Answer 1

[Андрей Федоров]

codepen.io/aliencash/pen/oxzgZG

Извините за calc(), это для скорости. Можно тоже самое на linear-gradient сделать, будет более кроссбраузерно.

Comments

[Дмитрий Сергеев]

Спасибо большое

[Андрей Федоров]

Дмитрий Сергеев: Обновил

[bro-dev]

Можно еще прикрутить счетчик на ксс чтобы не гавнокодить.
.container {
counter-reset: list -1;}
.item:nth-child(n)::after {
counter-increment: list;
content: counter(list) ". ";

}

[Андрей Федоров]

Роман Бережнов: Ну ваще крутизна стала. )

Я знаю про counter, но особо пользоваться не умею - редко где нужен, а где нужен, там php уже решил этот вопрос. Надо бы разобраться что ли, для общего развития.

[Андрей Федоров]

Дмитрий Сергеев: Обновил

Answer 2

[Cyber_bober]

а что именно не понятно?