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

Question

[sirenko]

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

Comments

[Вадим]

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

[sirenko]

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

[Вадим]

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

[sirenko]

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

[Вадим]

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

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

[Андрей]

sirenko, Тут нужно использовать псевдоэлементы first-child, last-child. Для примера набросал css код, который должен дать понять, в каком направление двигаться:

ol{
  list-style-position:inside;
  display:inline-block;
  counter-reset: example 0;}
li{
  text-align:left;
  position: relative;
  list-style-type:none;
  position: relative;
  padding: 2.5rem 0;
}
li::before{
  content: counter(example, decimal);
  counter-increment:example 1;
  position:absolute;
  width: 1.75rem;
  height: 1.75rem;
  position: absolute;
  left: calc(50% - 1.75rem);
  top: -1rem;
  border: .1rem solid red;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 90%;
  background: #fff;
  z-index: 1;
  color: red;
}

li::after {
    content: "";
    width: 0.01rem;
    height: 4rem;
    background: red;
    position: absolute;
    left: calc(50% - .85rem);
    top: -2rem;
}

li:first-child::after {
    content: "";
    width: .01rem;
    height: 2rem;
    background: red;
    position: absolute;
    left: calc(50% - .85rem);
    top: 0;
}

li:last-child::after {
    content: "";
    width: .01rem;
    height: 2rem;
    background: red;
    position: absolute;
    left: calc(50% - .85rem);
    top: -2rem;
}

.info__text{
  padding-top: 50px;
  width: 800px;
  text-align:center;
  margin:0 auto;
  position: relative;
}

[Ankhena]

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

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

[sirenko]

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

[sirenko]

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

Answer 1

[Вадим]

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

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

Comments

[sirenko]

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