Возможно ли технически сверстать нарисованный блок с динамической границей для responsive верстки?

Question

[Alexander]

Возможно ли технически сверстать блок, нарисованный на картинке? Необходимо, чтобы его ширину можно было свободно менять (текст при этом будет занимать разное кол-во строк), а нижняя граница всегда должна заполнять расстояние до текста, но не перечеркивая его. Фон должен быть прозрачным (добавил желтую линию для наглядности).



P.S. Хотя бы с использованием Javascript...

Answer 1

[Евгений Петров]

Возможно. Примерно вот так (пока корректировал положение нижней планки, кто-то поэкспериментировал и сделал вторую версию:).
Близкая тема Как реализовать не стандартные (обрезанные) границы в блоке,за которым имеется цветной фон?

Comments

[Alexander]

о#@еть. это... гениально.

[kn1ght_t]

красивое решение)

[teotlu]

Евгений Петров: это был я. Просто заметил, что нижние границы не на одной высоте, и подвигал туда-сюда. Действительно гениально. А ведь я, не включив как следует голову, чуть не написал в теме, что без JS не получится. Хотя до этого неоднократно использовал этот же эффект при вёрстке заголовков с линиями по бокам.

[rhost]

Евгений Петров что-то прям жесть, пытался понять как работает но так и не смог) внутри "border-text" у "after" стоит position:absolute....каким образом его двигает текст ? о_О

[Евгений Петров]

Роман: элемент с position:absolute имеет значения правил позиционирования auto. Это значит, что он располагается на том месте, где появился.

Задав в нашем случае псевдоэлементу (имеющему по умолчанию display:inline) только ширину и позиционирование от контейнера, мы получаем его позицию по горизонтали, зависящую от окончания строкового содержания родительского блока. Для сдвига используем левый margin.

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

[rhost]

Евгений Петров: хм, тогда если добавить ещё туда :before и задать такие же правила то должно выйти тоже самое но только с левой стороны...но что-то не выходит)

[Евгений Петров]

Роман: А где начинается контент у блока?)

[rhost]

Евгений Петров: ну по после "before" он начинается и перед "after" заканчивается и по идеи "before" должен отрисоваться слева учитывая "bottom:0" ещё и внизу

[Евгений Петров]

Роман: Слева и вверху. Перед началом контента.

[rhost]

Евгений Петров: ну да я это все понимаю, я не могу немного понять почему не выходит повторить такую же фишку но только слева)

[equinox7]

Роман: Можно и слева повторить: jsfiddle.net/exgbnmh1/14

[artemenko]

Очень элегантное решение!