Линия до и после текста над картинкой

1,00
р.
Я хочу создать линию до и после центрированного заголовка. Линия и текст должны иметь прозрачный фон, чтобы иметь возможность позиционировать их на неодинаковом фоне. Строка не должна быть больше 100% ширины.
Как здесь на картинке:

Текст заголовка может измениться:
Ширина заголовка неизвестна Заголовок может занимать несколько строк

h1 { text-align: center border-bottom: 1px solid #000 }

Today


Свободный перевод вопроса Line before and after title over image от участника @JUO.

Ответ
Нестандартное решение )) :


fieldset { border-left: none border-right: none border-bottom: none text-align: center } Lorem ipsum.

Более стандартное:


header { text-align: center overflow: hidden } h1 { display: inline-block position: relative } h1:before, h1:after { content: '' position: absolute top: 50% height: 1px background: #000 } h1:before { right: 100% left: -1000% } h1:after { left: 100% right: -1000% }

Lorem ipsum.



ex , ex