Всем доброго времени суток, не могу понять как сверстать линии с кругляшками так чтобы при адаптации всё было норм, чтобы линии были строго через определенное количество строк, 1 строка сразу идёт линия далее через 2 строки такой нижний бордер, думал сделать через position absolute как-то но тут фишка в том что у этого текста редактируется line-height и получается надо будет как-то ещё высчитывать отступ у каждого такого бордера
Сергей delphinpro, а прикол, em - relative to the font-size of the element (2em means 2 times the size of the current font) получается em подстроиться под мой line-height? line-height у меня может динамически меняться
sharpsss, градиентами https://jsfiddle.net/Ankhena/n5b97ovh/
Старая песочница, придется смотреть через vpn, если вы в России или РБ.
Сейчас расчеты можно упростить за счет кастомных свойств.
Сергей delphinpro, эхх, жаль эта картинка должна иметь возможность динамически менять толщину и цвет линии а также толщину и цвет кругляшка по отдельности, всё что в голову приходит это сделать релатив блок с текстом а в него запихнуть абсолют контейнер height/width 100% для этих линий с крушляшками, далее получать высоту релатив блока с текстом и рендерить в абсолютный контейнер эти линии и кругляшки до тех пор пока они не будут превышать высоту релативного блока с текстом, звучит запарно, сижу мучаюсь пытаюсь что то попроще придумать
Ну так и расчёты меняйте, всё равно же уже скрипт придётся использовать для этого изменения.
Чтоб оно на лету в css считалось и менялось без задержек, можете скриптом только переменную менять, типа .style.setProperty('--line-height', lineHeight), а всё остальное уже в css через var(--line-height) и calc.
Простой
