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.
✨ Pregunta a Lara — tu compañera de estudio con IA
Desbloquea soporte de aprendizaje personalizado. Lara puede explicar lecciones, resumir temas y responder tus preguntas — disponible desde el plan Go y superiores.
Lara te ayuda a aprender más rápido — exclusivo para los miembros ReadyTools Go, Plus y Max.
