CSS: Encabezado centrado sobre una línea horizontal

Para seguir diversificando mi blog y añadir algo más de peso a la sección de tecnología, voy a compartir algo de código. Y es que esta semana mientras maquetaba una página web, me enfrenté a un problemilla de diseño al que tuve que dar solución, porque a veces no es fácil plasmar en código lo que el diseñador ha pensado.

Así que para conseguir centrar los encabezados sobre una línea horizontal que se rompe al llegar a este, probé varias soluciones como las comentadas en este artículo, pero ninguna me sirvió ya que todas se basan en fondos de un sólo color.

Jugando con los pseudo-elementos :before y :after conseguí el efecto deseado, definiendo el color de fondo y la altura; pero el truco está en establecer márgenes negativos en ambos lados, del mismo tamaño que la anchura del elemento (50%).

La ventaja de mi solución es que el encabezado puede tener cualquier color o imagen de fondo, no se añade ningún elemento HTML extra y además se adapta a la anchura del texto.

A continuación comparto el código CSS necesario para lograr el efecto deseado, que es más fácil de apreciar viéndolo en acción en un fiddle.

h1 {
 overflow: hidden;
 text-align: center;
}
h1:before,
h1:after {
 background-color: #000;
 content: "";
 display: inline-block;
 height: 1px;
 position: relative;
 vertical-align: middle;
 width: 50%;
}
h1:before {
 right: 0.5em;
 margin-left: -50%;
}
h1:after {
 left: 0.5em;
 margin-right: -50%;
}
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s