---
title: ':after | ::after'
slug: 'Web/CSS/:after'
tags:
  - Referencia_CSS
translation_of: 'Web/CSS/::after'
---
<p>{{ CSSRef() }}</p>
<h3 id="Resumo" name="Resumo">Resumo</h3>
<p><code>:after </code>cria um pseudo-elemento que é a última criança do elemento selecionado. Tipicamente usado para adicionar conteúdo cosmético a um elemento, pelo uso da propriedade CSS {{ cssxref("content") }}. Este elemento é <code>inline</code> por padrão.</p>
<p>{{ fx_minversion_note("3.5", "A versão do Firefox anterior à 3.5 somente tinha implementada a propriedade <code>:after</code> do CSS 2.0. Não foram permitidas <code>position, float, list-style-*</code> e algumas propriedades de exibição. O Firefox 3.5 removeu estas restrições. Note que isto independe da notação com :: mencionada anteriormente.") }}</p>
<h3 id="Sintaxe">Sintaxe</h3>
<pre>element:after  { propriedades do estilo }  /* sintaxe CSS2 */

element::after { <em>propriedades do estilo</em> }  /* sintaxe CSS3, não suportada pelo IE8 */</pre>
<p>A notação<code> ::after </code>foi introduzida no CSS3 com o objetivo de estabelecer uma diferença entre pseudo-classes e pseudo-elementos. Navegadores também aceitam a notação<code> :after </code>introduzida no CSS 2.</p>
<div class="note"><strong>Nota:</strong>  O Microsoft Internet Explorer 8 suporta somente a notação <code>:after</code>.</div>
<h3 id="Exemplos" name="Exemplos">Exemplos</h3>
<pre>.boringtext:after {
   content:    " Obrigado por ler tudo isto!";
   font-size:  small;
   color:      red;
   background: gray;
}
</pre>
<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/generate.html" title="http://www.w3.org/TR/CSS21/generate.html">CSS 2.1 Generated Content</a> (EN)</li> <li><a class="external" href="http://www.w3.org/TR/CSS21/selector.html#before-and-after" title="http://www.w3.org/TR/CSS21/selector.html#before-and-after">CSS 2.1 Selectors</a> (EN)</li> <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#gen-content" rel="external nofollow" title="http://www.w3.org/TR/css3-selectors/#gen-content">CSS 3 Selectors</a> (EN) Rascunho em produção</li>
</ul>
<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h3>
<table class="standard-table"> <tbody> <tr> <th>Navegador</th> <th>Versão mais antiga</th> <th>Suporte a</th> </tr> <tr> <td>Internet Explorer</td> <td>8.0</td> <td><code>:after</code></td> </tr> <tr> <td rowspan="2">Firefox (Gecko)</td> <td>1.0 (1.0)</td> <td><code>:after</code></td> </tr> <tr> <td>1.0 (1.5)</td> <td><code>:after | ::after</code></td> </tr> <tr> <td rowspan="2">Opera</td> <td>4.0</td> <td><code>:after</code></td> </tr> <tr> <td>7.0</td> <td><code>:after | ::after</code></td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> <td><code>:after | ::after</code></td> </tr> </tbody>
</table>
<h3 id="Veja_também">Veja também</h3>
<p>{{ Cssxref(":before") }}, {{ cssxref("content") }}</p>
<p>{{ languages( { "fr": "fr/CSS/:after", "pl": "pl/CSS/:after", "es": "es/CSS/after", "pt": "pt/CSS/:after" } ) }}</p>