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
seletor::after {
content: 'texto';
}
Exemplo
Vamos fazer com que ao passar o mouse sobre
li, o texto seja inserido no final:
<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>
li:hover::after {
content: '!!!';
}
:
Exemplo
É possível aplicar vários estilos ao texto inserido. Vamos colorir, por exemplo, este texto com alguma cor:
<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>
li:hover::after {
color: red;
content: '!!!';
}
:
Veja também
-
pseudoelemento
before,
que faz a inserção antes do texto da tag -
função
attr,
que obtém o valor do atributo da tag -
propriedade
counter-increment,
que define a numeração automática
