Как сделать рамку снизу и вписать в неё текст?

Question

[Aleksandr Yurchenko]

Здравствуйте.
На днях делал рамку вокруг текста, и текст вписанный в рамку снизу (ссылка). Делал через fieldset+legen

Сейчас нужно сделать очень похожу рамку, только что бы она не обрамляла текст, а как-ьы "подпирала" его


Пробовал, адаптировать вариант который скинул выше — не вышло. Пробовал без использования fieldset+legen, просто указать border-bottom обертке, не совсем то — ссылка, когда рамка уходит наверх она уменьшается в толщине.

Последнее что приходит в голову в псевдоэлементы (after, before) вставлять изображения и подгонять. Но неужели нельзя решить чистым css?

Answer 1

[Lord_Dantes]

Но неужели нельзя решить чистым css?

Можно, псевдо элементу задайте фон белый, позицию больше родителям и направьте его туда.
Сейчас попробую реализовать скину codepen

Answer 2

[Владимир Коротенко]

Как то так
https://jsfiddle.net/vkorotenko/pv8j3nmt/17/

Answer 3

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

Ну а зачем вам большой "какой-то текст" внутри fieldset? Его можно и отдельно сделать.
https://codepen.io/pen/?editors=1100#0

Comments

[Aleksandr Yurchenko]

Сначала мне показалось оптимальный вариант, но в итоге пришлось от fieldset+legen отказать :( не поддерживается ie и даже edge не тащит.
Не знал..

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

Aleksandr Yurchenko, проверьте еще раз - https://caniuse.com/#search=fieldset
То что у ie есть баги при этом, к вашему случаю не имеет отношения - у вас нет задизабленных полей ввода.