Saltar la navegación

Pseudo-elementos

Concepto

Los pseudo-elementos permiten seleccionar y poner estilo a una parte de un elemento, como por ejemplo, poner estilo a la primera letra o línea de un elemento o insertar contenido antes o después de un elemento. La sintaxis para definir una pseudo-clase es:

selector:pseudo-element {
     property: value;
}

, donde pseudo-element puede ser reemplazado, por ejemplo, por uno de los 5 tipos de pseudo-elementos:

Tipos

Pseudo-Elemento
Descripción
Ejemplo
::first-line
Formatea la primera línea del texto
::first-letter
Formatea la primera letra del texto
::after
Inserta algún contenido después del contenido de un elemento
::before
Inserta algún contenido antes del contenido de un elemento
::selection
Coteja la porción de un elemento que es seleccionado por el usuario

Ejemplos

Ejemplo 1: Si se tiene, por ejemplo, un párrafo de varias líneas y en color azul y lo que se quiere es que solo el texto de su primera línea se presente en mayúsculas de tamaño corto y en color rojo, el código sería así:

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