Как правильно реализовать вертикальный степпер через список?

Question

[sirenko]

Подскажите, пожалуйста, как правильное реализовать. Я пытаюсь через ol, но не могу понять как выровнять сам маркер относительно li с текстом

Comments

[Вадим]

код где?
а лучше демка на codepen.

[sirenko]

Вадим, https://codepen.io/212ww134/pen/zYmbKYe

[Вадим]

sirenko, отлично. Первый шаг выполнен - создана демка.
Теперь нужно выполнить второй шаг - написать код, с которым у Вас не получилось и нужна помощь, а не просто шаблон, чтобы сделали за Вас.

[sirenko]

Вадим, это код), я не понимаю как обратиться к маркеру, чтобы выровнять

[Вадим]

sirenko, для обращения непосредственно к маркеру есть селектор на псевдоэлемент - ::marker.
Но он не позволит Вам сделать так, как на дизайне, потому что у него ограничены свойства, которые ему можно задавать. Там грубо говоря разрешено всё что относится к тексту.

Поэтому тут нужно скрывать стандартный маркер и пользоваться псевдоэлементами и css счётчиками.

[Ankhena]

sirenko, ну вот же li::before - сам написали селектор в котором его создали. Его и двигайте.

Абсолют там не нужен от слова вообще, обычным блоком поставьте.

[sirenko]

Вадим, спасибо большое,получилось, но не уверена, что это правильно codepen.io/212ww134/pen/zYmbKYe

[sirenko]

Stop_Loll, огромное спасибо

Answer 1

[Вадим]

sirenko, Для первого раза не плохо.
Но есть ряд нюансов:
1) Дивы нельзя вкладывать в списки. Это не валидно
2) Вы хардкодите значения для каждого элемента. Это лишнее.
3) Если текста будет другое количество, то всё поплывёт.
4) Не нужно два псевдоэлемента, чтобы нарисовать 2 линии. Достаточно одного для длинной линии и другого для цифры поверх.

Переписал на скорую руку (какие то стили для Вас могут оказаться лишними. Прописаны исключительно для демки):

Comments

[sirenko]

Ещё раз большое спасибо