Pseudo-elementos CSS

Qué son los pseudo-elementos?

Un pseudo-elemento CSS es usado para dotar de un estilo específico a parte de un elemento. Por ejm, un pseudo-elemento se puede usar para:

  • Dar estilo a la primera letra o primera línea de un elemento.
  • Insertar contenido antes o después del contenido de un elemento.

Sintaxis

La sintaxis de un pseudo-elemento es la siguiente:

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

El pseudo-elemento ::first-line

Este elemento es usado para añadir un estilo específico a la primera línea de un texto.

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
</style>
</head>
<body>

<p>Puedes usar el pseudo-elemento ::first-line para agregar un
efecto especial a la primera línea de un texto. Algo más de texto. Y aún más,
y más, y más, y más, y más, y más, y más,
y más, y más, y más, y más, y más.</p>

</body>
</html>

El pseudo-elemento ::first-line sólo se puede aplicar a elementos de bloque. Las siguientes propiedades pueden aplicarse con ::first-line:

  • Propiedades de fuente
  • Propiedades de color
  • Propiedades de color de fondo
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Observa la notación de dos puntos dobles: ::first-line frente a:first-line. Los dos puntos dobles reemplazaron la notación de dos puntos para los pseudo-elementos en CSS3. Este fue un intento del W3C de distinguir entre pseudo-clases y pseudo-elementos. La sintaxis de dos puntos se usó tanto para pseudo-clases como para pseudo-elementos en CSS2 y CSS1. Para la compatibilidad con versiones anteriores, la sintaxis de dos puntos es aceptable para los pseudoelementos CSS2 y CSS1.

El pseudo-elemento ::first-letter

Este pseudo-elemento es usado para añadir un estilo especial a la primera letra de un texto.

Ejm

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

::first-letter sólo puede ser utilizado para elementos de bloque, y se puede aplicar a las siguientes propiedades:

  • Propiedades de fuente
  • Propiedades de color
  • Propiedades de color de fondo
  • Propiedades de margen
  • Propiedades de padding
  • Propiedades de border
  • text-decoration
  • vertical-align (sólo si float tiene el valor none)
  • text-transform
  • line-height
  • float
  • clear

Pseudo-elementos y clases

Los pseudo-elementos se pueden utilizar junto a clases HTML.

Ejm

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

Múltiples pseudo-elementos

Múltiples pseudo-elementos pueden ser combinados. En el siguiente ejm, la primera letra de un párrafo será en rojo y con un tamaño xx-large. El resto de la linea será azul y con font-variant: small-caps.

Ejm

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

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

El pseudo-elemento ::before

Puede ser usado para insertar texto antes del contenido de un elemento.

Ejm

h1::after {
  content: url(smiley.gif);
}

El pseudo-elemento ::marker

El pseudo-elemento ::marker selecciona los marcadores de los elementos de la lista.

Ejm

::marker { 
  color: red;
  font-size: 23px;
}

El pseudo-elemento ::selection

El pseudoelemento ::selection coincide con la parte de un elemento que selecciona un usuario. Las siguientes propiedades CSS se pueden aplicar a ::selection: color, background, cursor y outline. El siguiente ejemplo hace que el texto seleccionado sea rojo sobre un fondo amarillo.

Ejm

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

Resumen

Selector Ejemplo Descripción del ejemplo
::after p::after Inserta algo después del contenido de cada elemento <p>
::before p::before Inserta algo antes del contenido de cada elemento <p>
::first-letter p::first-letter Selecciona la primera letra de cada elemento <p>
::first-line p::first-line Selecciona la primera línea de cada elemento <p>
::marker ::marker Selecciona los marcadores de los elementos de la lista.
::selection p::selection Selecciona la parte de un elemento que es seleccionado por un usuario