Pseudo-elemento before

El pseudo-elemento before inserta texto antes del elemento. Se utiliza únicamente junto con la propiedad content, que define el texto que se debe insertar.

Sintaxis

cssselector::before {
  content: 'texto';
}

Ejemplo

Hagamos que al pasar el cursor sobre li se inserte texto al principio:

html<ul>
  <li>elemento de lista</li>
  <li>elemento de lista</li>
  <li>elemento de lista</li>
  <li>elemento de lista</li>
  <li>elemento de lista</li>
</ul>

cssli:hover::before {
  content: '!!!';
}

Результат:

Ejemplo

Al texto insertado se le pueden aplicar varios estilos. Pintemos, por ejemplo, este texto de algún color:

html<ul>
  <li>elemento de lista</li>
  <li>elemento de lista</li>
  <li>elemento de lista</li>
  <li>elemento de lista</li>
  <li>elemento de lista</li>
</ul>

cssli:hover::before {
  color: red;
  content: '!!!';
}

Результат:

Véase también