El usuario de foros McAsh se preguntó cómo podrían codificar un diseño en el que había un encabezado grande y un subtítulo más pequeño debajo que presentaba líneas horizontales dobles que sobresalían después del texto, tanto a la izquierda como a la derecha del texto centrado. Algo fácil de imitar como imagen, pero mucho más difícil de lograr en CSS debido a la naturaleza variable del texto (longitud, tamaño, etc.).
La maqueta de la publicación era esta:
Codifiqué una forma de hacerlo que funciona, pero no es del todo perfecta. Pensé en publicarlo aquí y todos ustedes podrían contribuir con mejores formas si se les ocurre.
Si el fondo fuera de un color sólido, esto sería bastante fácil. Aplique el fondo rayado al subtítulo y centre un tramo en el medio con un poco de relleno y un color de fondo para que coincida con el fondo sólido. No tenemos un color de fondo sólido aquí. Quizás algún truco usando la misma imagen de fondo pero arreglando la posición del fondo funcionaría, pero no fui allí.
En su lugar, utilicé los pseudoelementos ::before y ::after para crear el conjunto de líneas izquierda y derecha. El texto todavía está en un lapso, que está relativamente posicionado. El conjunto de la derecha es un pseudo elemento en ese lapso que comienza 100% desde la izquierda con un poco de margen para alejarlo, y viceversa para el conjunto de la izquierda. Ambos tienen una altura fija y usan borde superior e inferior para crear las líneas. Por lo tanto, no se utilizan fondos y el interior de todo es transparente.
La longitud de las líneas es lo suficientemente larga como para salir siempre del contenedor principal, y están cortadas por un desbordamiento oculto en ese principal.
.fancy {
line-height: 0.5;
text-align: center;
}
.fancy span {
display: inline-block;
position: relative;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid white;
border-top: 1px solid white;
top: 0;
width: 600px;
}
.fancy span:before {
right: 100%;
margin-right: 15px;
}
.fancy span:after {
left: 100%;
margin-left: 15px;
}Ejemplo:
Hay dos cosas que no me gustan de esto.
- La altura de la línea: 0.5 para centrar las líneas alrededor del texto me parece un “número mágico” que podría no ser correcto dependiendo de la fuente.
- El ancho de las líneas de los pseudoelementos no es exactamente lo que deben ser, pero son mucho más largas de lo que deben ser y se cortan.
Tampoco es un gran problema, sino pequeñas cosas que probablemente podrían arreglarse inteligentemente.