Сложный декоративный заголовок с двумя отдельными границами

Какое решение Вы можете предложить для создания такого заголовка?

Как видите, левая полоска не явлется border-left, т. к. её длина (вернее, высота) не равна истинной высоте блока.
Я сам пробовал "нарисовать" левую полоску вручную, т. е. в виде отедльного блока со стилями и позиционированием, но мне такое решение не очень нравится, потому как совершенно лишено адаптивности (в мобильных версиях заголовки могут не уместиться в одну строку). Что-нибудь ещё возможно?

Ответ

В таких случаях традиционно пользуются псевдо-элементами ::before и ::after, потому что они позволяют экономить на мусоре в разметке.
Собственно, одну полоску рисуем бордером, другую — псевдо-элементом. По-моему, выбор произвольный. Я не заметил, чтобы это вызывало какие-то проблемы на узких экранах. (Или я неправильно понял ваше задание — у вас многострочный пример отсутствует.)
h1 { position: relative; padding: 3px 5px; border-left: 3px #666 solid; } h1::after { content: " "; display: block; position: absolute; left: -3px; right: 0; bottom: -5px; height: 2px; background: #888; }

Hello world!

Hello world!