¿Qué es un pseudo-elemento?

El pseudo-elemento en CSS es una palabra clave que se añade a un selector, permitiendo estilizar una parte específica del elemento sin crear explícitamente elementos adicionales en el DOM.

Los pseudo-elementos más utilizados son:

• ::before: Inserta contenido generado antes del contenido del elemento seleccionado.
• ::after: Inserta contenido generado después del contenido del elemento seleccionado.
• ::first-line: Aplica estilos a la primera línea de un elemento de bloque.
• ::first-letter: Aplica estilos a la primera letra de un elemento de bloque.
• ::selection: Aplica estilos a la parte del elemento que el usuario ha seleccionado (por ejemplo, al resaltar texto con el ratón).
• ::placeholder: Aplica estilos al texto de marcador de posición en campos <input> o <textarea>.

Ejemplo de uso de ::before y ::after:

div::before {
  content: "Prefijo: "; // Propiedad content obligatoria
  color: blue;
}

div::after {
  content: " Sufijo"; // Propiedad content obligatoria
  color: red;
}

Ejemplo de uso de ::first-line y ::first-letter:

p::first-line {
  font-weight: bold;
}

p::first-letter {
  font-size: 2em;
  float: left;
  margin-right: 0.1em;
}

Los pseudo-elementos son útiles para agregar elementos decorativos, generar contenido, estilizar partes del texto y otras tareas, simplificando la estructura HTML. Históricamente, comenzaban con un solo dos puntos (:), pero la especificación CSS3 introdujo dos puntos (::) para distinguir entre pseudo-clases (:hover, :focus) y pseudo-elementos, aunque un solo dos puntos todavía es compatible en la mayoría de los navegadores para pseudo-elementos antiguos. Se recomienda usar ::.