elemento pseudo de CSS ::before

definición y uso

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

usar 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 agregará antes de otro contenido interno del elemento.

usar ::after insertar contenido después del contenido de un elemento específico.

ejemplo

ejemplo 1

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

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

prueba por ti mismo

ejemplo 2

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

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

prueba por ti mismo

sintaxis de CSS

::before {
  declaraciones css;
}

detalles técnicos

soporte 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