Как сделать вертикальную линию между элементами по вертикали?

Question

[mcrack25]

Вот пример того, что я бы хотел понять. Как Вы видите тут линия которая касается одного значка и всех последующих, допустим текста в блоках будет больше, тогда и линии должны увеличиться, не могу понять как можно прижать по вертикали к верху и низу и чтобы это заканчивалось на значке.

Comments

[mcrack25]

У меня есть подозрения, что средствами CSS тут не обойтись я правильно понимаю?

Я так понимаю нужно будет создать блок шириной 1px на 1px, затем прижать его абсолютным позиционированием к верхнему блоку, к значку, затем через JavaScript расчитать высоту между first-child и last-child и выставить ему размер, равный вычисленному значению?

Есть что-то проще?

Answer 1

[Максим]

https://codepen.io/topicstarter/pen/BGPEQK так вроде бы

Comments

[mcrack25]

Ваш вариант не похож на фотографию, у Вас линии выходят из значков, а меня интересует чтобы линия заканчивалась в значке. В том-то и проблема

[Максим]

mcrack25, щас проверь - ещё раз ссылку

[mcrack25]

Максим Ленский, интересное решение сделать absolute для последнего элемента, чтобы он пропал из общего ряда, но вот сверху всё ещё торчит палочка, но в пинципе я думаю если сместить эти кружочки выше немного и паддинги у item сверху чуть убрать, будет нормально.

Спасибо за помощь :-)

[Максим]

mcrack25, есть галочка отметить решением

[mcrack25]

Ок

[Максим]

mcrack25, скажи что и где торчит ?

[mcrack25]

Максим Ленский, Всё нормально, я с iPad смотрю тут иногда проскальзывают косяки, пообновлял несколько раз страницу, всё встало на место. Спасибо

Answer 2

[Владимир Проскурин]

Можно вот так вот сделать, просто для последнего элемента устанавливая border-left-color: transparent
https://codepen.io/anon/pen/MzqYrQ

Comments

[mcrack25]

У Вас тоже хороший вариант, попроще чем у Максима Ленского, но есть одно отличие, если блоки будут вложены, то ваши линии сместяться правее, а у него всегда линии будут на одном месте, можно иногда Ваш вариант, потому, что проще использовать, иногда его по обстоятельствам.

Спасибо за ваш вариант, интересное решение :-)!