Pseudo-Elementos CSS: Lo que todo diseñador web debe saber

Uno de los aspectos que más me gustan del CSS es la posibilidad que brinda en el diseño web a introducir y modificar ciertos elementos, que pese a no aportar nada al contenido, nos dan ese punto de diferencia y calidad en el diseño, o esa mejora de la experiencia de usuario.

Son elementos que podríamos introducir como etiquetas HTML, pero que realizadas de forma correcta por CSS, nos permite manejar una web más estructurada, semántica y más clara a los ojos de los buscadores. Bien para el usuario, bien para el posicionamiento. Y nada de ello sería posible si no existieran los Pseudo-Elementos CSS.

Hace unas semanas publicamos un artículo sobre esto en Octuweb (te recomiendo que si te gusta el diseño web le dés un vistazo), y como algunas cosa se quedaron en el tintero, hoy toca ampliar y recopilar sobre CSS y los Pseudo-elementos

Un poco de historia sobre los Pseudo-Elementos CSS

Vayamos por partes y hagamos un poco de memoria, que nunca viene mal. Los Pseudo-elementos se introdujeron en la versión 2.1 de CSS, y son 4:

::after
::before
::first-letter
::first-line

aunque a veces también se suele incluir en este grupo como pseudo-elemento el selector ::selection

Siempre van acompañando a selectores y su función consiste en definir un estilo especial en alguna parte del elemento al que están seleccionando (::first-letter a la primera letra y ::first-line a la primera línea) o añadir contenido y estilos antes o después del elemento seleccionado (::after contenido después y ::before añade contenido antes)

Sencillo ¿verdad? pues la sintaxis es muy sencilla, ya que siempre se incorporan al final del selector, independientemente de su estado (si tenemos :hover o cualquier otra pseudo-clase, irá ubicado tras ellas), quedando por tanto de la siguiente forma:

selector::pseudo-elemento {
	propiedad:valor;
}

Ojo, no confundir con pseudo-clases (:hover, :visited, :first-child, etc..), hablaremos de ellos próximamente 🙂

Sintaxis de los Pseudo-elementos, ¿dos puntos (:after) o cuatro puntos (::after)?

Pues bien, la forma correcta de utilizar los pseudo-elementos es mediante el uso de cuatro puntos ::after, ya que en CSS3 se introdujo esta variación para diferenciar a los pseudo-elementos de las pseudo-clases (que solo llevan el doble punto :hover).

Pero como inicialmente, cuando aparecieron los Pseudo-Elementos allá por la versión 2.1 de CSS, su sintaxis sólo llevaba un doble punto, para tener compatibilidad con los navegadores antiguos (principalmente con Internet Explorer 8, ya hablamos de los problemas con este navegador) se sigue utilizando el doble punto de forma generalizada, relegando el uso de los cuatro puntos a diseños y aplicaciones que solo están accesibles mediante navegadores modernos.

Así que, una vez ya sabes la diferencia entre la sintaxis antigua y la nueva, vamos a utilizar en este tutorial el doble punto simple (:after) por si aún queda algún despistado usando un navegador antiguo!

Posibilidades y Usos de Pseudo Elementos.

Perfecto, ahora que ya sabes como usar los pseudo-elementos, vamos a repasar algunos usos muy interesantes y que espero te sirvan de inspiración para seguir investigando, pues como verás a continuación, las posibilidades son infinitas.

El primer ejemplo trata de como utilizar los pseudo-elementos en combinación de una fuente web para definir los iconos sociales de cada enlace. Parece rebuscado, pero si lo piensas, con solo introducir el enlace de la red social, con CSS nos encargamos de definir el icono de la red social según la url del enlace.

Necesitaremos por tanto una fuente web con un buen repertorio de iconos sociales (font-awesome nos puede valer) y después definir un determinado número de reglas según la red social que vayamos a tener.

#menu-social li a:before {
  content: "\f135";
  display: inline-block;
  padding: 0 5px;
  font-family: FontAwesome;
  font-size: 26px;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#menu-social li a[href*="facebook.com"]:before {
  content: "\f09a";
}

Con esto nos ahorraremos la carga de las imágenes de cada icono, haciendo que la carga de nuestra web tenga menos llamadas al servidor y cargue más rápido. Igualmente, podemos añadir un color determinado para cada uno de los casos, por si queremos dar los colores corporativos de las redes sociales, o seleccionar una combinación de colores propia y original.

See the Pen Social Icons as pseudoelements by Ricardo Prieto (@ricardpriet) on CodePen.

Si estás en WordPress, puedes consultar este artículo sobre como incluir un menú social utilizando Pseudo-elementos y una fuente Web

El segundo ejemplo es sobre los tooltips. Podemos añadir mensajes personalizados a determinados elementos, como por ejemplo enlaces, para indicar una información extra:

a.quiero-data:after {
  content: attr(data-tooltip);
}
a.quiero-href:after {
  content: "Enlace a: " attr(href);
}

Imagínate lo útil que sería esto a la hora de rellenar un formulario, en el que en cada campo nos ofreciera una información extra sobre los datos que nos está pidiendo. Una buena UX con Pseudo-elementos.

See the Pen Tooltips :after and :before by Ricardo Prieto (@ricardpriet) on CodePen.

Y por último, un ejemplo que hicimos a propósito del artículo que publicamos en Octuweb sobre Pseudo-Elementos CSS, para explicar cómo el uso de capas y divs en HTML puede ser sustituido por unos buenos Pseudo-elementos…y un poco de diseño 😉

See the Pen Octuweb Demo by Ricardo Prieto (@ricardpriet) on CodePen.

Usa los Pseudo-elementos con cabeza y con un objetivo claro.

Los pseudo-elementos son muy versátiles, y al no estar incluidos en el HTML hacen que la estructura de la web sea más limpia y clara para los buscadores y/o futuros diseñadores/compañeros que vayan a modificarlo. Pero ten en mente que siempre hay que usarlos con un propósito.

Mejorar la experiencia de usuario, aligerar la carga del HTML o sustituir imágenes por fuentes son algunas de las ventajas que nos ofrecen a día de hoy los pseudo-elementos CSS y seguro que en futuro vendrán muchas más. Así que ya sabes, a usarlos con cabeza y a experimentar!