Cómo usar pseudoelementos de CSS

A veces necesitamos aplicar estilos a una parte muy específica de un elemento HTML, como la primera letra de un h1, la primera línea de un párrafo o agregar contenido al inicio o al final. En el pasado, mi solución automática solía ser recurrir a JavaScript, pero no es el mejor camino si CSS ya nos da una forma limpia de resolverlo mediante pseudoelementos.

Los pseudoelementos nos ayudan a dar estilo a una parte concreta de un elemento HTML. Puedes leer todos los detalles en la documentación de MDN o seguir leyendo este artículo.

Cómo usar pseudoelementos

Los pseudoelementos comienzan con ::. Si usas VS Code, el editor te muestra todas las opciones disponibles. Vamos a poner en práctica varios de ellos con un ejemplo sencillo:

<main>
	<h1>Pseudo elements</h1>
	<p>I use javascript for some DOM Changes.</p>
	<p>I use Javascript to add some effects.</p>
</main>

Vamos a resolver las siguientes tareas en nuestro marcado:

• Agregar texto al inicio del párrafo usando ::before.
• Agregar puntos suspensivos (...) al final del párrafo usando ::after.
• Cambiar el color y el tamaño de la primera letra usando ::first-letter.
• Cambiar el color del texto y el fondo de la selección usando ::selection.
• Tomar la primera línea y aplicarle estilos con ::first-line.

¡Vamos a ello!

::before

El pseudoelemento ::before nos ayuda a realizar cambios o insertar contenido al inicio del selector que elijamos. Por ejemplo, con el selector p::before podemos agregar texto utilizando la propiedad content.

p::before {
	content: "At begin.. "
}

Ejemplo en JSFiddle

::after

El pseudoelemento ::after es similar a ::before, pero nos permite insertar contenido al final del selector. Por ejemplo, con el selector p::after podemos añadir puntos suspensivos usando la propiedad content.

Ejemplo en JSFiddle

::first-letter

El pseudoelemento ::first-letter toma únicamente la primera letra del selector para aplicarle estilos.

Ejemplo en JSFiddle

::selection

El pseudoelemento ::selection nos ayuda a cambiar el estilo del texto cuando el usuario lo selecciona. Por ejemplo, podemos modificar el color del texto seleccionado y también el color de fondo de la selección.

Ejemplo en JSFiddle

::first-line

Los pseudoelementos también se pueden combinar con pseudoclases. Usando una pseudoclase podemos omitir el primer párrafo y cambiar el color y tamaño de la primera línea en el siguiente párrafo.

Ejemplo en JSFiddle

¡Listo!

Espero que estos ejemplos te ayuden a entender mejor cómo funcionan CSS y los pseudoelementos.

Si te gustó este artículo, ¡compártelo!

Foto de Pooja Chaudhary en Unsplash