Pseudo-elementos CSS

Un pseudo-elemento CSS sirve para dar estilo a una parte especifica del contenido de la etiqueta. Como por ejemplo, darle estilo a la primera letra, o a la primera linea, o insertar contenido antes o después del contenido de la etiqueta.

Sintaxis

selector::pseudo-elemento { propiedad: valor; }

Para los pseudo-elementos se utilizan dos puntos dobles a diferencia de las pseudo-clases con dos puntos únicos. Esta nueva notación fue agregada en el estándar CSS3 por parte del W3C para diferenciarlas de las pseudo-clases, dado que en CSS1 y CSS2 se utilizaban dos puntos para ambos. Por compatibilidad con versiones anteriores, la sintaxis de dos puntos es aceptable para los pseudo-elementos CSS2 y CSS1.

El pseudo-elemento ::first-line

El pseudo-elemento ::first-line sirve para agregar un estilo especial a la primera línea de texto en una etiqueta con nivel de bloque.

El siguiente ejemplo, da formato a la primera línea de un texto en todas etiquetas <p>:

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Nota: El pseudo-elemento ::first-line solo aplica a etiquetas de nivel de bloque.

Las siguientes propiedades que aplican al pseudo-elemento ::first-line son:

  • Propiedades de fuentes (font).
  • Propiedades de color (color).
  • Propiedades de fondo (background).
  • Propiedades de espaciado de palabras (word-spacing).
  • Propiedades de decoración de texto (text-decoration).
  • Propiedades de alineamiento vertical (vertical-align).
  • Propiedades de trasformación de texto (text-transform).
  • Propiedades de altura de línea (line-height).
  • Propiedades para limpiar (clear).

El pseudo-elemento ::first-letter

El pseudo-elemento ::first-letter sirve para agregar un estilo especial a la primera letra de un texto en una etiqueta con nivel de bloque.

El siguiente ejemplo, da formato a la primera letra el texto de todas las etiquetas <p>:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

Nota: El pseudo-elemento ::first-letter solo aplica a etiquetas con nivel de bloque.

Las siguientes propiedades que aplican al pseudo-elemento ::first-letter son:

  • Propiedades de fuentes (font).
  • Propiedades de color (color).
  • Propiedades de fondo (background).
  • Propiedades de margen (margin).
  • Propiedades de relleno (padding).
  • Propiedades de bordes (border).
  • Propiedades de decoración de texto (text-decoration).
  • Propiedades de alineamiento vertical, pero solo si float: none; (vertical-align).
  • Propiedades de trasformación de texto (text-transform).
  • Propiedades de altura de línea (line-height).
  • Propiedades de flotamiento (float).
  • Propiedades para limpiar (clear).

Combinar pseudo-elementos y clases CSS

Los pseudo-elementos pueden ser combinados las clases CSS.

En el siguiente ejemplo, especifica que la primera letra del párrafo en rojo y un aumenta el tamaño:

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

Combinar pseudo-elementos CSS

Los pseudo-elementos pueden ser combinados.

En el siguiente ejemplo, la primera letra de los párrafos se especifica en rojo y un tamaño mayor, el resto de la primera línea se especifica en color azul y un tamaño menor y el resto del párrafo será del color y tamaño predeterminado.

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
p:first-line {
  color: #0000ff;
  font-variant: small-caps;
}

El pseudo-elemento ::before

El pseudo-elemento ::before sirve para insertar un contenido antes del contenido de una etiqueta.

El siguiente ejemplo, inserta una imagen antes del contenido de cada etiqueta <h1>:

h1::before {
  content: url(foto.jpg);
}

El pseudo-elemento ::after

El pseudo-elemento ::after sirve para insertar un contenido después del contenido de una etiqueta.

El siguiente ejemplo, inserta una imagen después del contenido de cada etiqueta <h1>:

h1::after {
  content: url(foto.jpg);
}

El pseudo-elemento ::selection

El pseudo-elemento ::selection aplica una porción de contenido que es seleccionado por el usuario.

Las siguientes propiedades aplican al pseudo-elemento ::selection:

  • color
  • background
  • cursor
  • outline

El siguiente ejemplo, especifica el texto seleccionado en color rojo y fondo amarillo:

::selection {
  color: red;
  background: yellow;
}

Los pseudo-elementos CSS

 Selector Ejemplo Descripción
::after p::after Inserta contenido después del contenido de cada etiqueta <p>.
::before p::before Inserta contenido antes del contenido de cada etiqueta <p>. 
::first-letter p::first-letter Aplica para la primera letra de cada etiqueta <p>.
::first-line p::first-line Aplica para la primera línea de cada etiqueta <p>.
::selection p::selection Aplica a la porción de contenido seleccionada por el usuario.