Pseudo-elementos

¿Qué son?

Un pseudo-elemento se escribe con dos puntos dobles (::nombre) y actúa como si insertara un elemento extra dentro de otro, sin tener que agregarlo al HTML. La convención moderna usa :: (doble) para diferenciarlos de las pseudo-clases, que usan : (simple), aunque por compatibilidad los navegadores todavía aceptan la sintaxis vieja con uno solo en casos como :before.

::before y ::after

Insertan contenido generado justo antes o después del contenido real de un elemento. Necesitan la propiedad content para existir, aunque sea vacía.

.tooltip::before {
  content: "";
  position: absolute;
  border: 6px solid transparent;
  border-top-color: black;
}

.required::after {
  content: " *";
  color: red;
}

Se usan mucho para íconos decorativos, flechitas de tooltips, o marcar campos obligatorios en un formulario, sin ensuciar el HTML con elementos que no tienen significado semántico.

::first-line y ::first-letter

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

p::first-letter {
  font-size: 2.5em;
  float: left;
  line-height: 1;
}

::first-line estila la primera línea del texto (recalculándose según el ancho disponible), y ::first-letter apunta solo a la primera letra — el clásico efecto de letra capital en revistas y diarios.

::placeholder y ::selection

input::placeholder {
  color: #999;
  font-style: italic;
}

::selection {
  background: #5b9bd5;
  color: white;
}

::placeholder estila el texto de ayuda de un <input> vacío, y ::selection cambia cómo se ve el texto que el usuario selecciona con el mouse.