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

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

Как здесь на картинке:  

    

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


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


    

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


 
Today
     


Перевод вопроса: Line before and after title over image @JUO
    

Ответы

Ответ 1

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



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


Ответ 2

Вы можете сделать линию по обеим сторонам заголовка с 2 псевдоэлементами и границами:     


Это работает на transparent background (линии и название имеют
прозрачные фоны).  
Длина линии адаптируется к ширине заголовка, поэтому они всегда
начинаются и заканчиваются с одинаковыми пробелами независимо от
длины заголовка.   
Заголовок может занимать несколько строк, в то время как левая и
правая линии остаются вертикально центрированными (обратите внимание,
что вам нужно обернуть заголовок тегом span, чтобы это работало.


     



@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
 body {
  background-image: url(http://i.imgur.com/EzOh4DX.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  font-family: 'Open Sans', sans-serif;
}
h1 {
  width: 70%;
  margin: .7em auto;
  overflow: hidden;
  text-align: center;
  font-weight:300;
  color: #fff;
}
h1:before, h1:after {
  content: "";
  display: inline-block;
  width: 50%;
  margin: 0 .5em 0 -55%;
  vertical-align: middle;
  border-bottom: 1px solid;
}
h1:after {
  margin: 0 -55% 0 .5em;
}
span {
  display: inline-block;
  vertical-align: middle;
}
Today
Today news
Today
news




Перевод ответа: Line before and after title over image @web-tiki


Ответ 3

Вот еще один подход, используя дисплей flexbox. Свойство flex-grow определяет, ка
свободное пространство должно распределяться между элементами, когда их общий размер меньше размера контейнера.
По умолчанию для элементов, описывающие строки, width не указана, и у них нет содержимог
(то есть они в основном пусты и не занимают места).  Однако применение flex-grow н
этих элементах обеспечивала бы равномерное распределение между ними оставшегося пространства (общее пространство контейнера - пространство текста).  Это заставляет линию выглядеть так, как будто она проходит от начала до конца  за исключением того места, где находится текст.      

Сплошная линия по обе стороны контента:      

В приведенном ниже фрагменте, градиент сверху вниз используется для создания эффекта сплошной линии с обеих сторон контента.      



h3{
  display: flex;
  flex: 1;
  width: 70%;
  margin: 20px auto;
  line-height: 1em;
}
.heading:before, .heading:after,
.heading-ie span.after, .heading-ie span.before{
  content: '';
  flex-grow: 1;
  margin: 0px 4px;
  background: linear-gradient(to right, white, white);
  background-size: 100% 2px;
  background-position: 0% 50%;
  background-repeat: repeat-x;
}

/* Just for demo*/
body{
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

Something broader
Something broader and broader
Something broader
 and spans multiple 
 no. of lines




   
  Something broader and broader and broader
   





     

Линия с градиентным эффектом с обеих сторон контента:     

В приведенном ниже фрагменте, тонкий градиент слева направо используется для создани
эффекта линии, которая идет от сплошного цвета рядом с текстом к прозрачному с другой стороны.       



h3{
  display: flex;
  flex: 1;
  width: 70%;
  margin: 20px auto;
  line-height: 1em;
}
.heading:before, .heading:after,
.heading-ie span.after, .heading-ie span.before{
  content: '';
  flex-grow: 1;
  margin: 0px 4px;
  background-size: 100% 2px;
  background-position: 0% 50%;
  background-repeat: repeat-x;
}
.heading:before, .heading-ie span.before{
  background-image: linear-gradient(to right, transparent, white);
}
.heading:after, .heading-ie span.after{
  background-image: linear-gradient(to left, transparent, white);
}

/* Just for demo*/
body{
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}  

Something broader
Something broader and broader
Something broader
 and spans multiple 
 no. of lines




   
  Something broader and broader and broader
   
 




Примечание. В фрагменте я использовал дополнительные элементы span для строк, потом
что IE11, по-видимому, не поддерживает flex-grow для псевдоэлементов. В противном случае то же самое может быть достигнуто и с псевдоэлементом.      



Недостатком этого подхода является довольно низкая поддержка браузерами этой функции.     

Вам также может потребоваться адаптировать некоторые настройки браузера, которы
подробно описаны в моем ответе здесь, который подобен этому.    

В настоящее время это не дает ничего сверх ответа @web-tiki, но является еще одни
возможным вариантом. Такой подход был бы более полезным в случаях, подобных приведенным ниже:    



h3{
  display: flex;
  flex: 1;
  width: 70%;
  margin: 20px auto;
  line-height: 1em;
}
.heading-ie .start, .heading-ie .middle, .heading-ie .end{
  content: '';
  flex-grow: 1;
  margin: 0px 4px;
  background: linear-gradient(to right, white, white);
  background-position: 0% 50%;
  background-size: 100% 2px;
  background-repeat: repeat-x;
}

/* Order specifies the order in which the elements should be presen within container */

.content-1{
  order: 2;
}
.start{
  order: 1;
}
.middle{
  order: 3;
}
.content-2{
  order: 4;
}
.end{
  order: 5;
}

/* Just for demo*/

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}



   
  Text here
   
  and here too
   



   
  Text with 
 line break
   
  and here with 
 line break too
   





     

Источник