Как сверстать правильно заголовок с линией на фоне?

Question

[Олег Семенов]

Как сверстать подобного типа заголовок h2 с линиями на фоне не разделяя на несколько блоков.

Answer 1

[Олег]

https://codepen.io/werty1001/pen/BqwzaL - подход неидеальный, но это чисто декоративный элемент, поэтому более менее можно забить

Comments

[profesor08]

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

Answer 2

[Арсений Матыцин]

Нечасто сталкиваюсь с таким извращением, но, насколько я помню, в отношении инлайновых элементов псевдоэлементы могут в перенос.

Но вангую перегрев в нижней части в решении этого вопроса.

З.Ы.: если это частный случай, или нет необходимость предусмотреть пользовательский ввод, оборачивай в span строку и ей фигарь before или after.
<h2><span>Развиваем</span><span>Российскую...</h2>

Answer 3

[Дамир Саяхов]

Не совсем прям супер подход, но можно с помощью js и split разбить это всё и каждое слово обернуть в span, как Арсений выше написал. Дальше уже намного проще будет