Línea antes y después del título sobre la imagen

Quiero crear una línea antes y después de un título centrado . La línea y el texto deben tener un fondo transparente para poder ubicarlos en un fondo irregular. La línea no debe ser del 100% de ancho, como esta:

Texto centrado con línea antes y después sobre una imagen

El texto del título puede cambiar:

  • El ancho del título no se conoce
  • El título puede abarcar varias líneas
h1 { text-align: center; border-bottom: 1px solid #000; } 
 

Today

Puede hacer una línea en ambos lados del título con 2 pseudo elementos y bordes:

  • Esto funciona sobre un fondo transparente (las líneas y el título tienen fondos transparentes).
  • La longitud de la línea se adaptará al ancho del título para que siempre comiencen y terminen en la misma posición independientemente de la longitud del título.
  • El título puede abarcar varias líneas, mientras que las líneas izquierda y derecha permanecen centradas verticalmente ( Tenga en cuenta que debe ajustar el título en una etiqueta para que esto funcione. Consulte la demostración )

Título con línea antes y después sobre una imagen

 @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

Aquí hay otro enfoque al usar la pantalla flexbox. La propiedad flex-grow especifica cómo se debe distribuir el espacio libre entre los elementos cuando su tamaño total es menor que el tamaño del contenedor.

Por defecto, no se especifica ningún width en los elementos que producen las líneas y no tienen content (lo que significa que básicamente están vacíos y no ocupan espacio). Sin embargo, la configuración de flex-grow en estos elementos haría que el espacio sobrante (espacio total del contenedor – espacio del texto) se distribuya equitativamente entre ellos. Esto hace que parezca que la línea se ejecuta de extremo a extremo, excepto donde está el texto.

Línea sólida en cualquier lado del contenido:

En el siguiente fragmento, se usa un degradado de arriba a abajo para producir el efecto de tener una línea continua en cada lado del contenido.

 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