Как отверстать такие линии не изображением?

Question

[WebforSelf]

Как сделать такие полоски кодом (адаптивными) при наведении на пункты они должны подсвечиваться, ccs с таким справляется? Никто не сталкивался с похожим, вдруг пример есть.

Comments

[RAX7]

https://github.com/anseki/leader-line

Answer 1

[Евгений]

Сталкивался с таким дизайном и дизайнерами, которые такое рисуют - больше с ними не работаем

Comments

[WebforSelf]

ахахаха, зачетный ответ)

[Шохрух Шаймардонов]

WebforSelf, ну а если по делу, то svg

Answer 2

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

https://codepen.io/aliencash/pen/vYOdmRo
Или svg мучайте.

UP: Придумал поинтереснее вариант - https://codepen.io/aliencash/pen/rNVJmKv

Comments

[Максим]

Или svg мучайте.

++++

[WebforSelf]

Попробовал, но натянуть на бустрап 4 не получилось.

Подскажите как сделать в таком формате? с помощью псевдоэлементов получится?

https://codepen.io/webforself/pen/rNVJgQd

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

WebforSelf, на данном этапе готовности вашей верстки решение предложенное мной в виде кода гарантировано слетит. а поправить вы не сможете, т.к. уж простите задаете детские вопросы. Попробуйте лучше сами, так вы будете понимать, что подкрутить, если что-то пойдет не так.
Общий принцип такой: берете элемент в котором у вас цифра, даете ему position: relative. Далее к нему либо отдельным элементом, либо псевдоэлементом приклеиваете блок с предложенными мной стилями и position: absolute. По размеры блока должны равняться разнице между позициями соединяемых линиями цифр. Но не забываейте, что в мобильной версии или при разном количестве текста этот размер может меняться. Тогда используйте медиа-выражения или считайте на js.

[WebforSelf]

Андрей Федоров, так что проще будет? псевдоэлементами делать? или через svg попробовать?

P.S. жаль что нет кнопки заплатить чтоб вы помогли) очень кстати порой, вроде пустяковая проблема, а сижу с ней уже пол дня.

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

WebforSelf, ладно, держите - https://codepen.io/aliencash/pen/LYVQKRw
Но еще раз призываю вас разобраться как это работает и не забывать про адаптивность.

[WebforSelf]

Андрей Федоров, Спасибо дорогой товарищ! буду пробовать на js уменьшать ширину и высоту скорей всего, других выходов не вижу

Answer 3

[Владислав Лысков]

https://codepen.io/sfi0zy/pen/qwpprw разбирай

Comments

[Максим]

какую порнуху генерирует эта штука ...