Pseudo-elemento CSS ::after
Use o pseudo-elemento CSS ::after para adicionar elementos depois do conteúdo. Saiba mais sobre o pseudo-elemento e experimente os exemplos.
Em CSS, ::after cria um pseudo-elemento que é o último filho do elemento selecionado. Gera conteúdo que aparece depois do conteúdo original do elemento. Pode ser utilizado para inserir caracteres, cadeias de texto ou imagens.
O valor é definido pela propriedade content.
Por predefinição, o pseudo-elemento ::after é inline.
Pode ser animado, posicionado ou colocado em float como qualquer outro conteúdo.
O pseudo-elemento ::after também pode ser utilizado com a notação de dois-pontos simples :after, que é suportada por todos os browsers.
O pseudo-elemento ::before adiciona conteúdo antes de qualquer outro conteúdo, ao passo que o pseudo-elemento ::after adiciona conteúdo depois de qualquer outro conteúdo em HTML.
Versão
Sintaxe
Pseudo-elemento CSS ::after
::after {
css declarations;
}Exemplo do pseudo-elemento ::after:
Exemplo de CSS ::after
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::after {
content: " - William Shakespeare.";
}
</style>
</head>
<body>
<h2>::after selector example</h2>
<p>"Be or not to be"</p>
</body>
</html>No exemplo seguinte, é possível adicionar estilos ao conteúdo.
Exemplo do pseudo-elemento ::after com conteúdo estilizado:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::after {
content: " - William Shakespeare.";
background-color: #eee;
color: #1c87c9;
padding: 5px 3px;
border: 2px dashed #000;
margin-left: 5px;
}
</style>
</head>
<body>
<h2>::after selector example</h2>
<p>"Be or not to be"</p>
</body>
</html>