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

Я хочу создать линию до и после центрированного заголовка. Линия и текст должны иметь прозрачный фон, чтобы иметь возможность позиционировать их на неодинаковом фоне. Строка не должна быть больше 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