Pseudoelementos en CSS

Los pseudoelementos permiten apuntar a partes específicas de un elemento, como la primera letra o la primera línea. También pueden agregar contenido extra sin modificar el HTML.

¿Qué es un pseudoelemento?

Los pseudoelementos se indican con doble dos puntos (::) y apuntan a partes que no son elementos HTML separados. Ejemplos: ::before, ::after, ::first-line o ::selection.

Pseudo-element	Descripción
::before	Inserta contenido antes del elemento.
::after	Inserta contenido después del elemento.
::first-line	Estiliza la primera línea del elemento.
::first-letter	Estiliza la primera letra del elemento.
::selection	Estiliza el texto seleccionado.

Formatear texto con pseudoelementos

Con pseudoelementos puedes aplicar estilos únicos al texto, como resaltar la primera letra o la primera línea de un párrafo.

En este ejemplo, la primera línea de un párrafo aparece en negrita y azul, y la primera letra es más grande y roja.

Agregar contenido extra

Con ::before y ::after puedes añadir contenido al documento sin modificar el HTML. Esto es útil para mostrar íconos, decoraciones o textos adicionales.

Consejos para usar pseudoelementos

Los pseudoelementos enriquecen el diseño y mejoran la experiencia del usuario. Aquí algunos consejos:

Siempre define 'content' cuando uses ::before o ::after, de lo contrario no se mostrarán.
Úsalos para decoración o información extra, pero no para contenido principal.
Asegúrate de que los estilos de pseudoelementos no dificulten la lectura del contenido principal.