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

Question

[ArutaGerman]

Как сверстать подобный блок адаптивно, чтобы не было пробелов и не расползался при изменении разрешения?

Comments

[Дима Долготер]

просто текст сжимается и высота каждого пункта увеличивается

[Aetae]

А в чём у тебя проблема? Просто блоки под друг другом. Кружок - :after с border-radius и counter-increment. Палка - :before с L-образной фиговиной нарисованной border'ом. Для всех кроме :last-child - border-left.

[ArutaGerman]

Aetae, в целом я так и думаю, но не могу догадаться как создать последнюю строку, т.к. она по сути обрывается в центре и не идёт до конца элемента :before

[Максим]

ArutaGerman, если париться не хочешь то сделай на svg

[Aetae]

ArutaGerman, яж расписал - она не отличается от других - у всех L-образные хреновины(без отростка вниз). Просто для всех :not(:last-child) блоков дополнительно border-left.

[ArutaGerman]

Aetae, Спасибо!

Answer 1

[Aetae]

Примерно так: