Pseudo-elementos CSS: dando estilo a tu web
Como supongo ya te habrás dado cuenta, soy un loco apasionado del CSS (además de un poco alienígena) y de todas las posibilidades que este nos ofrece. Cambio una y mil veces mis diseños, y los pseudo-elementos son la forma más rápida, sencilla y útil de conseguir darle ese toque original y de calidad que todos buscamos.
Son herramientas que nos permiten conseguir más fácilmente la separación entre estructura y presentación, lo que a fin de cuentas da una web mejor estructurada, semántica y más apetecible de cara a los buscadores. Y esto no sería posible sin el uso de pseudo-elementos.
Sintaxis, ¿dos o cuatro puntos?
Esta parece ser la duda existencial de todo desarrollador, y lo cierto es que no debiera serlo. En CSS3 se introdujo la variación de los cuatro puntos (::) para matizar la diferencia entre pseudo-elementos y pseudo-clases, que sólo llevan dos puntos, como por ejemplo :hover.
No obstante, los pseudo-elementos son anteriores a la tercera versión de CSS y por tanto su sintaxis anterior era la misma que la de las pseudo-clases, de ahí que se siga aceptando la antigua sintáxis. Por lo general se suele usar la sintáxis antigua de sólo dos puntos, sobre todo para dar mayor compatibilidad a nuestro código en navegadores antiguos.
::first-line
El pseudo-elemento ::first-line nos permite seleccionar la primera línea dentro de un elemento. Por ejemplo. la siguiente regla CSS nuestra la primera línea de un párrafo en color rojo:
p:first-line { color: red; }
Evidentemente podríamos haberlo hecho mediante una clase introducida directamente en nuestro HTML, pero imagínate el trabajo y "código sucio extra" si tenemos que hacerlo en multitud de párrafos.
Además esto sólo sería posible si el diseño es rígido, ya que si tenemos un diseño fluido o responsive, el tamaño de la primera línea variará en función del tipo del dispositivo donde se vea nuestra web, lo cual nos lleva al uso irremediable de ::first-line.
::first-letter
El pseudo-elemento ::first-letter selecciona la primera letra (también afecta a otros caracteres y signos de puntuación) del texto de un elemento. Puntualizar que este selector sólo puede usarse en elementos de bloque. Así, para la siguiente regla de CSS ponemos en mayúscula la primera letra de cada párrafo:
p:first-letter { text-transform: uppercase; }
Evidentemente, y al igual que ocurría con ::first-line podemos hacer lo mismo mediante una clase introducida en el HTML; sin embargo, nuestro código queda mucho más limpio y estructurado si hacemos uso de este pseudo-elemento.
::before y ::after
Sin duda alguna estos dos pseudo-elementos son la "crema de la tarta" de los selectores de CSS. Son una herramienta muy útil a la hora de dar estilo a nuestro documento, pero eso sí, hay que tener mucho cuidado según que cosas queremos hacer.
Los pseudo elementos ::before y ::after en combinación con la propiedad content nos permiten añadir contenido antes y después de contenido original de un elemento. Por ejemplo, la siguiente regla de CSS añade el texto "Capítulo - " delante de cada encabezado h1:
h1:before { content: "Capítulo - "; }
Como puedes ver es una herramienta poderosa, y que como suele pasar con estas cosas hay que utilizarla con cabeza y sumo cuidado. Ten en cuenta que el contenido debe ir siempre en el HTML a fin que pueda ser bien rastreado por los buscadores, con lo cual únicamente debemos usar estos elementos con fines estéticos, y si introducimos algún tipo de contenido que este no sea importante y que si se elimina no cambie el significado del contenido del elemento original.
Su uso está muy extendido, y más que usarlos como en el ejemplo de arriba, se usan por ejemplo para cambiar los iconos de una web por fuentes, introduciéndolas mediante una regla bien con ::before o :after como en este pen de Ricardo Prieto, o bien podríamos crear un triángulo con CSS y usarlo como indicador de elemento seleccionado en un menú. Esto ya es cosa de tu imaginación.