Línea antes y después del título sobre la imagen [duplicado]
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 posicionarlos sobre un fondo irregular. La línea no debe tener 100% de ancho, así:
El texto del título puede cambiar:
- Se desconoce el ancho del título.
- El título puede abarcar varias líneas.
h1 {
text-align: center;
border-bottom: 1px solid #000;
}<h1>Today</h1>
Puedes hacer una línea a 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 envolver el título en una
<span>etiqueta para que esto funcione. Vea la demostración ).
@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;
}<h1>Today</h1>
<h1>Today news</h1>
<h1><span>Today<br/>news</span></h1>
Aquí hay otro enfoque mediante el uso de la pantalla Flexbox. La flex-growpropiedad 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 widthse especifica en los elementos que producen las líneas y no tienen content(lo que significa que están básicamente vacíos y no ocupan espacio). Sin embargo, la flex-growconfiguración de 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 va de un extremo al otro, excepto donde está el texto.
Línea sólida a cada lado del contenido:
En el siguiente fragmento, se utiliza un degradado de arriba a abajo para producir el efecto de tener una línea sólida a cada lado del contenido.
Mostrar fragmento de código
Línea con efecto de degradado a ambos lados del contenido:
En el siguiente fragmento, se utiliza un degradado fino de izquierda a derecha para producir el efecto de una línea que va de un color sólido cerca del contenido a transparente en el otro lado.
Mostrar fragmento de código
Nota: En el fragmento he usado spanelementos adicionales para las líneas porque IE11 no parece admitir flex-growpseudoelementos. De lo contrario, también se puede lograr lo mismo con un pseudoelemento.
El inconveniente de este enfoque es la compatibilidad del navegador con esta función, que es bastante baja en este momento. Es posible que también deba adoptar algunas personalizaciones específicas del navegador que se detallan en mi respuesta aquí , que es similar a esta.
En la actualidad, esto no aporta nada adicional a la respuesta de web-tiki, pero es solo otra opción posible. Este enfoque sería más útil en casos como el siguiente :
Mostrar fragmento de código
