Separador centrado con pseudoelementos

Publicado el: 14 de abril de 2012

Los pseudoelementos dan solución a muchos problemas de diseño que no podía solventar antes, este un ejemplo simple de su uso.

El problema

Quería separar una lista con el texto centrado mediante una línea, el problema es que dependiendo de la anchura de cada línea de texto y del ancho del contenedor el resultado no era demasiado “bonito”. Si simplemente colocamos un borde al elemento <li> esta queda colocada de lado a lado del contenedor.

li{border-bottom:1px solid #ccc;}

La solución

La solución gráfica más simple es que la línea no lleque hasta los bordes del contenedor, si no que quede a una distancia intermedia entre el texto más largo y el más corto.

Cierto que podríamos solventarlo con una imágen de fondo, pero vivamos peligrosamente

Demo Código

Pseudoelementos al rescate

Los pseudoelementos tienen la particularidad de funcionar de manera independiente, graficamente hablando, lo que nos permite dar muchas soluciones a problemas de maquetación con CSS. EN este caso usaremos el pseudoemento li:before, para generar la línea situandola en el centro mediante el calculo de su posición desde la izquierda.

        li:before{
            content:"";
            position:absolute;
            border-bottom:1px solid #ccc;
            bottom:0; 
            left:30%;
            width:40%;          
        }

Matemáticas

Hay que tener en cuenta que hay que calcular la posición de la línea desde la derecha para colocarla centrada con respecto a el contenedor de la lista.

Pixeles

Entonces … si tenemos un contenedor de 500px y la línea separadora mide 200px, su posición centrada se calcula restando las dos cantidades y dividiendolas entre 2. En este caso la distancia por la izquierda sería de 150px left:150px;

500px – 200px = 300px / 2 = 150px

Tantos por ciento

La misma formula matemática. En este caso el valor en pixeles del contenedor es irrelebante, siendo siempre el ancho del contenedor el 100%, si en ancho del pseudoelemento es del 40%, sería …

100% – 40% = 60% / 2 = 30%

Obviamente esto os sirve para colocar cualquier pseudoemento de manera centrada.