Pseudoelementos
Pseudoelemento de generación de contenidoPseudoelemento – Primera letra y/o primera línea

<< Pseudoclases Atributos >>

Al igual que las pseudoclases, los pseudoelementos son otra característica CSS que nos permite dar estilo a elementos que no existen realmente en el HTML y que podemos generar desde CSS. Con las pseudoclases utilizábamos los dos puntos (:), ahora con pseudoelementos utilizaremos dos dobles puntos (::), aunque antiguamente se utilizaba de la misma forma, con sólo dos puntos.

Pseudoelemento de generación de contenido

Con la propiedad content se utilizan los selectores ::before o ::after, para indicar que vamos a crear contenido antes o después del elemento respectivamente. Los parámetros que admite esta propiedad es variado, permitiendo concatenar información mediante espacios. Los tipos de contenido que podemos utilizar son:

  • “string”: Añade el contenido de texto indicado. Ejemplo: content: “Hola mundo”;
  • attr(atributo): Añade el valor del atributo HTML indicado.
  •  url(URL): Añade la imagen indicada en la URL content: url(fondo.png);

Pseudoelemento – Primera letra y/o primera línea

También existen pseudoelementos con los que podemos referenciar a la primera letra de un texto(::first-letter) o a la primera línea(::first-line) y aplicarle un estilo en concreto.

p{
     color: #333;
     font-size: 14px;
}
p::first-letter{
     color: black;
     font-size: 40px;
}
p::first-line{
     color: #999;
}

Podemos encontrar más pseudoelementos aquí.

<< Pseudoclases Atributos >>