La vida está llena de pequeñas cosas que, sin darle mucha importancia al principio, comienzas a usarlas de forma recurrente, hasta que llega un viernes cualquiera en el que miras por la ventana, con el sol anaranjado el azul de un cielo despejado y te haces esa pregunta: ¿Cómo hemos podido vivir tanto tiempo sin pseudo-elementos?
Pues sí, igual que tratamos de solucionar cualquier arañazo en el coche con una buena cantidad de saliva y dedo gordo, los pseudo elementos se han convertido en un arma poderosa para el maquetador web, tanto a la hora del desarrollo como posteriores “añadidos” al proyecto, con un: “- eso lo arreglo yo con un ::after”, igual que el arañazo. Solo que aquí sí funciona 🙂
Para quien nunca haya oído hablar de pseudo elementos, algo muy sencillo: son elementos que se añaden a los selectores de CSS, y que a diferencia de las pseudo-clases que nos permitían seleccionar estados, ahora podemos seleccionar una parte concreta del documento.
Tenemos varios pseudo elementos a nuestro alcance, lo más conocidos son ::before y ::after, aunque también podemos sacarle mucho partido a otros pseudo elementos como ::first-letter y ::first-line, que nos sirven para seleccionar y darle estilo a la primera letra o primera línea del texto de nuestro selector.
Antes de profundizar un poco más, un detalle sobre la puntuación. Seguro que te has encontrado más de una vez un doble punto o dos dobles puntos antes del pseudo-elementos (:before vs ::before). Ambos funcionan de la misma forma, simplemente los 4 puntos (::) es la nuevo formato que se introdujo en CSS3 para diferenciar entre pseudo-clases y pseudo-elementos.
Por tanto si necesitas compatibilidad con navegadores antiguos, dos puntos (:), si no es así, puedes usar la forma moderna (::). La mayoría de navegadores soportan ambas. Como siempre IE no, en la versión 8 necesitaremos solo los dos puntos (:before). Nos referiremos a ellos en el artículo como :after y :before, para ahorrar algún píxel 😉
La sintaxis es muy básica, añadir el pseudo-elemento al final del selector,
background-color: #EC6060;
}
y cuando los utilicemos de forma combinada con pseudo-clases, siempre van al final (recuerda, seleccionamos una parte concreta del elemento, por tanto debemos tener en cuenta el estado del mismo).
Así pues:
background-color: #FC8080;
}
Fácil. Una vez entendido lo básico, vamos a jugar un poco.
IconFonts + Pseudo-elementos
Una combinación poderosa es sin duda la unión entre fuentes de iconos y pseudo-elementos, por dos motivos principales:
- Usamos una fuente web para todos los iconos, con una sola llamada al servidor y posibilidad de agrandar, colorear, rotar…
- Todo esos iconos lo introducimos en los :after y :before, quedando un HTML muy muy limpio.
Un ejemplo de esto, usando la fuente de iconos Font-Awesome. Vamos a usarla introduciendo el contenido del icono como content para cada :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;
}
Seleccionaremos qué icono aplicar a cada enlace según el atributo href (la ruta del enlace), definiendo uno genérico para cuando no dispongamos de icono para mostrar (en el ejemplo, el cohete)
content: "\f09a";
}
Esto mismo lo podemos aplicar elementos en un menú de navegación, comentarios, listas...seguro que ya se te están ocurriendo mil ideas. A jugar.
See the Pen Social Icons as pseudoelements by Ricardo Prieto (@ricardpriet) on CodePen.8811
Tooltips + Pseudo-elementos
Los tooltips utilizados con sensatez pueden ayudar a mejorar mucho la experiencia de usuario, sobre todo en formularios o elementos donde se requiera una explicación o no esté del todo claro la acción a realizar (muy útil sobre todo en ecommerce). Nuevamente, grandes ventajas, ya que el HTML queda muy limpio, y podemos interactuar y recuperar con algunos atributos como veremos a continuación.
content: attr(data-tooltip);
}
a.quiero-href:after {
content: "Enlace a: " attr(href);
}
En el ejemplo, recuperamos los datos para el atributo href y lo usamos con un texto personalizado, mientras que para .quiero-data, usamos el atributo data-* nuevo en HTML5, donde podemos almacenar datos relacionados con el elemento, y usarlo por ejemplo en este caso.
See the Pen Tooltips :after and :before by Ricardo Prieto (@ricardpriet) on CodePen.8811
¿Más? Conclusiones y transiciones
Si has llegado hasta aquí, ya te habrás dado cuenta de las posibilidades y escalabilidad que tienen los pseudo-elementos. Aunque los ejemplos anteriores pueden resultar un poco particulares, te aseguro que te pueden solucionar un problema y reducirte el tiempo de maquetación un buen número de minutos (y de líneas)
Sin embargo, es cierto que el 90% de las veces solo usamos estos pseudo-elementos para dar un detalle de color (una línea superior en el título, un círculo antes del texto, dar estilo a la primera letra como Drop Cap…), eliminado así cantidad de div y span que eran como pelusilla en nuestro HTML. Otra de las utilidades de los pseudo-elementos es la posibilidad de hacer clear: both; cuanto estemos trabajando con floats...en definitiva, la lista de usos se va alargando.
Por todo ello, es fundamental que usemos estos elementos con un objetivo evidente. Si te fijas bien, el primer ejemplo (iconos sociales) reduce drásticamente las llamadas al servidor (solo 1) y genera un HTML muy limpio. El segundo nos permite mejorar la UX en formularios y otros elementos sin necesidad de JS ni HTML adicional. Y el tercero...bueno el tercero es porque nos apetece agradecer el esfuerzo a Félix y a todos los compañeros con los que hemos compartido este proyecto 🙂
Allá va: solo dos div y un h1, con dos :after y dos :before, transiciones y giros (hasta donde llegue la compatibilidad entre navegadores). Inpirado en the shapes of CSS.
See the Pen Octuweb Demo by Ricardo Prieto (@ricardpriet) on CodePen.8811
Ya sabéis, a pseudoelementear! 🙂