Pseudoelemento before

O pseudoelemento before insere texto antes de um elemento. É usado apenas em conjunto com a propriedade content, que define o texto a ser inserido.

Sintaxe

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

Exemplo

Vamos fazer com que ao passar o mouse sobre um li, o texto seja inserido no início dele:

html<ul>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
</ul>

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

Результат:

Exemplo

É possível aplicar vários estilos ao texto inserido. Vamos colorir este texto, por exemplo, com alguma cor:

html<ul>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
</ul>

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

Результат:

Veja também