Elemento pseudo ::after do CSS

Definição e uso

CSS ::after Os pseudo-elementos são usados para inserir alguns conteúdos após o conteúdo do elemento especificado.

Uso content O atributo especifica o conteúdo a ser inserido. O valor de content pode ser:

• String: content: "Hello world!";
• Imagem: content: url(myimage.jpg);
• Sem conteúdo: content: none;
• Contador: content: counter(li);
• Aspas: content: close-quote;
• Valor do atributo: content: " (" attr(href) ")";

Dica:Observe que o conteúdo inserido ainda está dentro do elemento especificado. O conteúdo inserido será adicionado após o outro conteúdo interno do elemento.

Uso ::before Insira alguns conteúdos antes do conteúdo de um elemento específico.

Exemplo

Exemplo 1

Insira uma string após o conteúdo de cada elemento <p>:

p::after {
  content: " - Lembre-se disto";
}

Experimente você mesmo

Exemplo 2

Insira uma string após o conteúdo de cada elemento <p>, e defina o estilo do conteúdo inserido:

p::after {
  content: " - Lembre-se disto";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

Experimente você mesmo

Sintaxe CSS

::after {
  declarações css;
}

Detalhes técnicos

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente esse elemento pseudo.

Páginas relacionadas

Tutorial:Elemento pseudo-CSS

Referência:Elemento pseudo ::before do CSS