Линия до и после текста над картинкой
1,00
р.
Я хочу создать линию до и после центрированного заголовка. Линия и текст должны иметь прозрачный фон, чтобы иметь возможность позиционировать их на неодинаковом фоне. Строка не должна быть больше 100% ширины.
Как здесь на картинке:
Текст заголовка может измениться:
Ширина заголовка неизвестна Заголовок может занимать несколько строк
h1 { text-align: center border-bottom: 1px solid #000 }
Свободный перевод вопроса 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% }
ex , ex
Как здесь на картинке:
Текст заголовка может измениться:
Ширина заголовка неизвестна Заголовок может занимать несколько строк
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
