---
title: '::after (:after)'
slug: 'Web/CSS/::after'
translation_of: 'Web/CSS/::after'
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary">Em CSS, <strong><code>::after</code></strong> cria um <a href="/pt-BR/docs/Web/CSS/Pseudo-elementos">pseudo-elemento</a> que é o último filho do elemento selecionado. Muitas vezes é usado para adicionar e melhorar o conteúdo de um elemento como a propriedade {{cssxref("content")}}.</span> É inline por padrão.</p>

<pre class="brush: css no-line-numbers  language-css"><code class="language-css"><span class="comment token">/* Adiciona uma seta após os links */</span>
<span class="selector token">a<span class="pseudo-class token">::after</span> </span><span class="punctuation token">{</span>
  <span class="property token">content: "</span></code>→<code class="language-css"><span class="property token">";</span>
<span class="punctuation token">}</span></code></pre>

<h2 id="Sintaxe">Sintaxe</h2>

<pre class="syntaxbox">{{csssyntax}}</pre>

<div class="note">
<p>O CSS3 introduziu a notação <code>::after</code> (com dois sinais de dois pontos) para distinguir <a href="/pt-BR/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> dos <a href="/pt-BR/docs/Web/CSS/Pseudo-elements">pseudo-elementos</a>. Os navegadores também aceitam <code>:after</code>, introduzido no CSS2.</p>
</div>

<h2 id="Exemplos">Exemplos</h2>

<h3 id="Uso_simples">Uso simples</h3>

<p>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.</p>

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

<pre class="brush: css">.exciting-text::after {
  content: "&lt;- now this *is* exciting!";
  color: green;
}

.boring-text::after {
   content: "&lt;- BORING!";
   color: red;
}</pre>

<h4 id="Visualização">Visualização</h4>

<p>{{EmbedLiveSample('Uso_simples', 500, 150)}}</p>

<h3 id="Exemplos_decorativos">Exemplos decorativos</h3>

<p>Podemos estilizar textos ou imagens na propriedade {{cssxref("content")}} praticamente de qualquer forma que quisermos.</p>

<pre class="brush: html">&lt;span class="ribbon"&gt;Observe onde a caixa de laranja está.&lt;/span&gt;</pre>

<pre class="brush: css">.ribbon {
  background-color: #5BC8F7;
}

.ribbon::after {
  content: "Observe esta caixa laranja";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}</pre>

<h4 id="Visualização_2">Visualização</h4>

<p>{{EmbedLiveSample('Exemplos_decorativos', 450, 20)}}</p>

<h3 id="Dicas">Dicas</h3>

<p>O exemplo a seguir mostra o uso do <code>::after</code> <a href="/pt-BR/docs/Web/CSS/Pseudo-elementos">pseudo-elemento</a> em conjunto com a expressão CSS <a href="/pt-BR/docs/Web/CSS/attr"><code>attr()</code></a> e um <a href="/pt-BR/docs/Web/HTML/Global_attributes#attr-dataset">tributo data personalizado</a> <code>data-descr</code> para criar uma <em>dica </em>em forma de glossário feito em CSS puro. Verifique a visualização abaixo, ou veja este exemplo em <a href="https://developer.mozilla.org/files/4591/css-only_tooltips.html">página separada.</a></p>

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

<pre class="brush: 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;
}</pre>

<h4 id="Visualização_3">Visualização</h4>

<p>{{EmbedLiveSample('Dicas', 450, 120)}}</p>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}</td>
   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
   <td>Sem mudanças significativas em relação à especificação anterior.</td>
  </tr>
  <tr>
   <td>{{Specname("CSS3 Transitions", "#animatable-properties", "transitions on pseudo-element properties")}}</td>
   <td>{{Spec2("CSS3 Transitions")}}</td>
   <td>Permite transições em propriedades definidas em pseudo-elementos.</td>
  </tr>
  <tr>
   <td>{{Specname("CSS3 Animations", "", "animations on pseudo-element properties")}}</td>
   <td>{{Spec2("CSS3 Animations")}}</td>
   <td>Permite animações em propriedades definidas em pseudo-elementos.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}</td>
   <td>{{Spec2('CSS3 Selectors')}}</td>
   <td>Introduz a sintaxe de dois sinais de dois pontos.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Definição inicial, usando a sintaxe de um sinal de dois pontos.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Recurso</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Suporte ao <code>:after</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.0")}}[1]</td>
   <td>8.0</td>
   <td>{{CompatOpera("4")}}</td>
   <td>4.0</td>
  </tr>
  <tr>
   <td>Suporte ao <code>::after</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.8")}}[1]</td>
   <td>9.0</td>
   <td>{{CompatOpera("7")}}</td>
   <td>4.0</td>
  </tr>
  <tr>
   <td>Suporte à animações e transições</td>
   <td>26</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Recurso</th>
   <th>Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suporte ao <code>:after</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>Suporte ao <code>::after</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>Suporte à animações e transições</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("4.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] O Firefox anterior à versão 3.5 implementou apenas a versão CSS 2.0 de <code>:after</code>. Não foram permitidos {{cssxref("position")}}, {{cssxref("float")}}, <code>list-style-*</code> e algumas propriedades exibição. O Firefox 3.5 removeu estas restrições.</p>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li>{{Cssxref("::before")}}, {{cssxref("content")}}</li>
</ul>