Pseudoelemento after

O pseudoelemento after insere texto após o elemento. É usado apenas em conjunto com a propriedade content, que define o texto a ser inserido.

Sintaxe

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

Exemplo

Vamos fazer com que ao passar o mouse sobre li, o texto seja inserido no final:

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::after {
  content: '!!!';
}

Результат:

Exemplo

É possível aplicar vários estilos ao texto inserido. Vamos colorir, por exemplo, este texto 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::after {
  color: red;
  content: '!!!';
}

Результат:

Veja também