¿Qué son los pseudo-elementos CSS como y cómo los utilizo?

Los pseudo-elementos en CSS son palabras clave que se añaden a un selector para permitirte aplicar estilos a una parte específica de un elemento seleccionado o para insertar contenido antes o después del contenido real de un elemento, sin necesidad de añadir marcado HTML adicional. Se distinguen de las pseudo-clases (que seleccionan elementos en un estado particular) porque los pseudo-elementos actúan como si estuvieras añadiendo un nuevo elemento «virtual» al DOM con fines de estilización.

La sintaxis moderna y recomendada para los pseudo-elementos utiliza doble dos puntos (::) para diferenciarlos claramente de las pseudo-clases (que usan un solo dos puntos :). Aunque los navegadores suelen soportar la sintaxis de un solo dos puntos para los pseudo-elementos más antiguos (:before, :after, :first-letter, :first-line) por razones de compatibilidad con CSS2, es mejor usar :: para los nuevos y, por consistencia, para todos.

Pseudo-elementos comunes y cómo se utilizan:

1. ::before:
   • Crea un pseudo-elemento que se convierte en el primer hijo del elemento seleccionado.
   • Se utiliza comúnmente junto con la propiedad content para insertar contenido (texto, símbolos, imágenes pequeñas mediante url(), o incluso una cadena vacía para crear formas decorativas) antes del contenido principal del elemento.
2. ::after:
   • Crea un pseudo-elemento que se convierte en el último hijo del elemento seleccionado.
   • También requiere la propiedad content y se usa para insertar contenido después del contenido principal del elemento.
   • Es muy útil para añadir elementos decorativos, iconos (como flechas en enlaces externos), o para implementar técnicas como el "clearfix" (aunque esto es menos necesario con Flexbox y Grid).
3. ::first-letter:
   • Aplica estilos a la primera letra del contenido de texto de un elemento de bloque.
   • Ideal para crear efectos de capitular (drop caps) o para destacar la primera letra de un párrafo.
4. ::first-line:
   • Aplica estilos a la primera línea del contenido de texto de un elemento de bloque. La longitud de la "primera línea" depende de factores como el ancho del elemento, el tamaño de la fuente, etc.
5. ::selection:
   • Aplica estilos a la porción del documento que ha sido seleccionada (resaltada) por el usuario con el ratón o el teclado. Solo se pueden aplicar unas pocas propiedades CSS aquí, principalmente color, background-color, y text-shadow.
6. ::marker:
   • Permite estilizar el marcador (viñeta o número) de los elementos de lista (<li>). Se pueden cambiar su color, font-size, content, etc.
7. ::placeholder:
   • Estiliza el texto de marcador de posición (placeholder) en los campos de formulario <input> y <textarea>.

Los pseudo-elementos son una herramienta muy útil porque te permiten añadir detalles visuales y contenido cosmético sin saturar tu HTML con elementos extra solo para fines de presentación. No forman parte del DOM real, pero el navegador los renderiza como si lo fueran.