Elemento pseudo CSS ::after

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:Atenção, 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 das navegadores na tabela indicam a primeira versão que suporta completamente o elemento pseudo.

Páginas Relacionadas

Tutorial:Elemento Pseudo-CSS

Referência:Elemento pseudo CSS ::before