Elemento pseudo de CSS ::before

Definición y uso

CSS ::before Los pseudo-elementos se utilizan para insertar contenido antes del contenido de un elemento especificado.

Uso content El atributo especifica el contenido que se debe insertar. El valor de content puede ser:

• Cadena: content: "¡Hola mundo!";
• Imagen: content: url(myimage.jpg);
• Sin contenido: content: none;
• Contador: content: counter(li);
• Comillas: content: open-quote;
• Valor del atributo: content: " (" attr(href) ")";

Consejo:Tenga en cuenta que el contenido insertado sigue ubicado dentro del elemento especificado. El contenido insertado se añade antes de otro contenido interno del elemento.

Uso ::after Inserte algún contenido después del contenido de un elemento específico.

Ejemplo

Ejemplo 1

Inserte una cadena antes del contenido de cada elemento <p>:

p::before {
  content: "Lea esto: ";
}

Prueba por ti mismo

Ejemplo 2

Inserte una cadena antes del contenido de cada elemento <p> y establezca el estilo del contenido insertado:

p::before {
  content: "Lea esto -";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

Prueba por ti mismo

Sintaxis de CSS

::before {
  declaraciones css;
}

Detalles técnicos

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que primero admite completamente este elemento pseudo.

Páginas relacionadas

Tutoriales:Elemento pseudo de CSS

Referencia:Elemento pseudo de CSS ::after