Я хочу создать линию до и после центрированного заголовка. Линия и текст должны иметь прозрачный фон, чтобы иметь возможность позиционировать их на неодинаковом фоне. Строка не должна быть больше 100% ширины. Как здесь на картинке:
Текст заголовка может измениться: Ширина заголовка неизвестна Заголовок может занимать несколько строк
h1 { text-align: center border-bottom: 1px solid #000 }
Today
Свободный перевод вопроса Line before and after title over image от участника @JUO.