::after (:after)

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Em CSS, ::after cria um pseudo-elemento que é o último filho do elemento selecionado. Muitas vezes é usado para adicionar e melhorar o conteúdo de um elemento como a propriedade content. É inline por padrão.

css

/* Adiciona uma seta após os links */
a::after {
  content: "→";
}

Sintaxe

Error: could not find syntax for this item

Nota: O CSS3 introduziu a notação ::after (com dois sinais de dois pontos) para distinguir pseudo-classes dos pseudo-elementos. Os navegadores também aceitam :after, introduzido no CSS2.

Exemplos

Uso simples

Vamos criar duas classes: uma para parágrafos tediosos e uma para parágrafos excitantes. Podemos então marcar cada parágrafo adicionando um pseudo-elemento ao final dele.

html

<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">
  Contributing to MDN is easy and fun. Just hit the edit button to add new live
  samples, or improve existing samples.
</p>

css

.exciting-text::after {
  content: "<- now this *is* exciting!";
  color: green;
}

.boring-text::after {
  content: "<- BORING!";
  color: red;
}

Visualização

Exemplos decorativos

Podemos estilizar textos ou imagens na propriedade content praticamente de qualquer forma que quisermos.

html

<span class="ribbon">Observe onde a caixa de laranja está.</span>

css

.ribbon {
  background-color: #5bc8f7;
}

.ribbon::after {
  content: "Observe esta caixa laranja";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}

Visualização

Dicas

O exemplo a seguir mostra o uso do ::after pseudo-elemento em conjunto com a expressão CSS attr() e um atributo data personalizado data-descr para criar uma dica em forma de glossário feito em CSS puro. Verifique a visualização abaixo, ou veja este exemplo em página separada.

html

<p>
  Aqui está o exemplo ao vivo do código acima.<br />
  Temos um pouco de
  <span data-descr="collection of words and punctuation">texto</span> aqui com
  algumas
  <span data-descr="small popups which also hide again">dicas</span>.<br />
  Não seja tímido, passe o mouse por cima para dar uma
  <span data-descr="not to be taken literally">olhada</span>.
</p>

css

span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00f;
  cursor: help;
}

span[data-descr]:hover::after {
  content: attr(data-descr);
  position: absolute;
  left: 0;
  top: 24px;
  min-width: 200px;
  border: 1px #aaaaaa solid;
  border-radius: 10px;
  background-color: #ffffcc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}

Visualização

Especificações

Specification
CSS Pseudo-Elements Module Level 4 # generated-content

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também

::before, content