Tecnología y Coaching para Emprendedores

Aprende a Usar los Pseudo-Elementos :before y :after en CSS

css

Los pseudo-elementos :before y :after se utilizan junto con la propiedad content para añadir contenidos antes o después del contenido original de un elemento. En este artículo vamos a ver a fondo qué son los pseudo-elementos :before y :after, y cómo  sacarles el máximo partido en nuestros diseños web.

A pesar que la W3C incluye otros pseudo-elementos, como son los conocidos :link, :hover o no tan conocido :first-child, en este artículo nos vamos a centrar exclusivamente en los pseudo-elementos :after y :before y explorar algunas de las cosas que podemos hacer con ellos para enriquecer nuestros diseños.

El pseudo-elemento :before

El pseudo-elemento :before hace algo que ningún otro elemento de CSS es capaz de hacer: insertar contenido justo antes de un elemento. Por ejemplo, imagínate que estás escribiendo un manual y quieres destacar los errores comunes. Cada vez que quieres poner “ERRORES COMUNES” delante de los errores comunes, tendrías que escribirlo en el HTML. Con :before olvídate de tener que repetir lo mismo una y otra vez. El formato es:

#ejemplo:before {
   content: "el contenido aqui";
}

Veamos ahora como lo implementamos en el ejemplo anterior. Supongamos que la descripción del error vaya dentro de un párrafo. Este párrafo tiene la clase errores. Lo que queremos es que justo antes del párrafo aparezca “ERRORES COMUNES”:

p.errores:before {
   content: "ERRORES COMUNES";
}

Para los que no lo sepáis, p.errores es un párrafo p de clase errores. Lo que estamos aquí diciendo es que cuando encuentre un párrafo de clase errores, inserte justo antes del mismo “ERRORES COMUNES”:

<p class="errores">Contenido del párrafo..</p>

Este contenido que inserta CSS en el código HTML, técnicamente se denomina “generated content” o contenido generado, ya que los navegadores lo crean en el momento de cargar la página, pues en el documento HTML original este contenido no existe. En sí esto tampoco es ninguna novedad, pues también genera, por ejemplo, los números de las listas ordenadas, pero es bueno tenerlo en cuenta.

Navegadores

A continuación detallamos los navegadores que dan soporte a los pseudo-elementos :before y :after .

  • Firefox 3.5+ (la versión 3.0 da soporte parcial)
  • Chrome 2+,
  • Safari 1.3+,
  • Opera 9.2+,
  • IE8+
  • Casi todos los navegadores móviles

Para aquellos que todavía dais soporte (o no os queda más remedio que dar soporte) al prehistórico IE6 y a su primo hermano IE7, indicaros que estos navegadores todavía viven en la edad de piedra y no entienden los pseudo-elementos.

El pseudo-elemento :after

Como ya os podéis venir imaginando, el pseudo-elemento :after hace justo lo contrario que :before, al insertar el contenido después del elemento. La estructura es la misma:

#ejemplo:after {
   content: "el contenido aqui";
}

Dar estilo a los contenidos insertados

Para dar un formato determinado a los contenidos insertados vía CSS, añadimos las propiedades que deseamos:

p.errores:before {
   content: "ERRORES COMUNES:";
   color:red;
   font-weight:700;
   padding-right:15px;
}

Ahora “ERRORES COMUNES” aparece en rojo negrita y hay una separación de 15px con los contenidos del párrafo.

Es importante tener en cuenta que la propiedad content no se puede eliminar. Imaginemos que no queremos insertar texto, sólo queremos añadir un sangrado de 25px de los contenidos. Lo que hacemos entonces es poner content:"";, y dar el formato de estilo que deseemos:

li.ejemplo:before {
   content: "";
   padding-right:25px;
}

Otro ejemplo de la propiedad content es que podemos crear un contenedor:

p.ejemplo:after {
   content: "";
    display: block;
   width: 200px;
   height: 50px;
   border:1px solid red;
}

Lo importante es que no eliminemos content, pues entonces los pseudo-elementos :before y :after no funcionarían.

Indicar que podemos utilizar estos pseudoelementos solos, por ejemplo así:

:before {
 content: "?";
}

Aunque esto sea técnicamente válido, no tiene ninguna aplicación práctica. Este código insertará un interrogante antes del contenido de cada elemento del DOM. Incluso en el caso que quitemos la etiqueta y todo su contenido, seguirán apareciendo dos interrogantes en la página: uno antes de y otro dentro del elemento que el navegador crea de manera automática.

Características de los contenidos de los pseudo-elementos :before y :after

Tal y como hemos mencionado anteriormente, los contenidos que insertamos vía la propiedad content, forman parte del CSS y no del HTML de la página, por lo que en el código fuente, sólo es visible en el CSS.

Por defecto, los elementos que insertamos son inline, por lo que, tal y como hemos visto en los ejemplos anteriores, para darles formato como márgenes, sangrado, etc, hay que definir el elemento como de bloque.

Veamos a fondo como funcionan los pseudo-elementos :after y :before con este ejemplo:

pseudo-elementos after before css

En este gráfico vemos que tenemos un elemento con id #ejemplo al que le damos un formato antes y después. Tanto antes como después aparecerá un bloque cuadrado de 50px de lado en el que dentro habrá un signo de interrogación. Los elementos destacados son el estilo que le damos al contenido que aparecerá antes y después respectivamente del elemento con id #ejemplo. La propiedad content, tal y como hemos indicado anteriormente, no se puede eliminar, o dejará de funcionar.

Insertar otro tipo de contenido

Hasta ahora hemos visto que podemos insertar textos o recuadros antes y después con los pseudoelementos :before y :after respectivamente. Pero las posibilidades van mucho más allá, pues podemos insertar cualquier tipo de elemento antes, como por ejemplo una imagen:

.ejemplo:before {
   content: url(imagen_antes.png);
}

.ejemplo:after {
   content: url(imagen_after.png);
}

En este ejemplo, es muy importante fijarse que no se usan comillas para insertar la imagen. Si ponemos url(imagen.jpg), en pantalla no aparecerá la imagen en cuestión, sino el texto “url(imagen.jpg)”.

A tener presente

Tal y como hemos indicado, los pseudo-elementos son sólo visibles en el CSS, lo que significa que no son parte del DOM. Estos elementos no son elementos reales, sino que se crean en el momento de cargar la página en el navegador. Esto hace que no sean visibles a muchos dispositivos para personas con discapacidad, por lo que no es recomendable utilizarlos para crear contenido relevante, pues estas personas no tendrán acceso a este contenido.

Otro punto a tener en cuenta es que como este contenido no forma parte del DOM, algunas herramientas de desarrollo web, muestran el contenido generado por los pseudo-elementos. F

Conclusión

En este artículo hemos visto una introducción a los pseudoelementos :before y :after de CSS. Para aquellos que os habéis quedado con más CSS-Tricks tiene un artículo publicado con una colección de cosas que se pueden hacer con los pseudo-elementos.


Comentarios

  • Sami

    Hola Sandra,

    No llego a entender el por qué necesitamos darle propiedades en css y contenido (en su caso) al html antes o después de cargar…que ganamos con ello no cargándolo de manera normal sin estos pseudoelementos?

    Gracias!

    • eSandra

      Hola Sami,

      entre otras cosas, te ahorras el tener que escribir un mismo código HTML una y otra vez :-)

      un abrazo!