---
title: '::after (:after)'
slug: 'Web/CSS/::after'
tags:
  - CSS
  - Layout
  - Pseudo-element
  - Reference
  - Web
translation_of: 'Web/CSS/::after'
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary">En <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a>, <strong><code>::after</code></strong> crea un <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> </span>que és l'últim fill de l'element seleccionat. Sovint s'utilitza per afegir contingut cosmètic a un element amb la propietat<span class="seoSummary">{{cssxref("content")}}.</span> Està integrat per defecte.</p>

<pre class="brush: css no-line-numbers  language-css"><code class="language-css"><span class="comment token">/* </span></code>Afegeix una fletxa després d'enllaços<code class="language-css"><span class="comment token"> */</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="Sintaxi">Sintaxi</h2>

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

<div class="note">
<p>CSS3 va introduir la notació de <code>::after</code> ( amb dos caràcters de dos punts ) per distingir les <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> dels <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>. Els navegadors també accepten <code>:after</code>, introduït en CSS2.</p>
</div>

<h2 id="Consideracions">Consideracions</h2>

<p>Els pseudo-elements generats per <code>::before</code> i <code>::after</code> estan <a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">continguts per la caixa de formatació de l'element</a> i, per tant  <code>::before</code> i <code>::after</code> no s'apliquen als <a href="https://www.w3.org/TR/2009/CR-CSS2-20090908/conform.html#replaced-element">elements reemplaçats</a> com <code>img</code>, or a elements <code>br</code>.</p>

<h2 id="Exemples">Exemples</h2>

<h3 id="Ùs_senzill">Ùs senzill</h3>

<p>Crearem dues classes: una per als paràgrafs boring i un per als exciting. Marcarem cada paràgraf afegint un pseudo-element al final del mateix.</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="Resultat">Resultat</h4>

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

<h3 id="Exemple_decoratiu">Exemple decoratiu</h3>

<p>Podem donar estil de text o imatges en la propietat {{cssxref("content")}} gairebé de qualsevol manera que vulguem.</p>

<pre class="brush: html">&lt;span class="ribbon"&gt;Notice where the orange box is.&lt;/span&gt;</pre>

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

.ribbon::after {
  content: "Look at this orange box.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}</pre>

<h4 id="Resultat_2">Resultat</h4>

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

<h3 id="Tooltips">Tooltips</h3>

<p>El següent exemple mostra l'ús del <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> <code>::after</code> en conjunció amb l'expressió CSS <a href="/en-US/docs/Web/CSS/attr"><code>attr()</code></a> i un <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-dataset">atribut de dades personalitzades</a> <code>data-descr</code> per crear un <em>tooltip</em> en pur CSS, similar al glossari. Feu clic en la vista prèvia en viu o vegeu aquest exemple en una <a href="https://developer.mozilla.org/files/4591/css-only_tooltips.html">pàgina apart.</a></p>

<pre class="brush: html">&lt;p&gt;Here is the live example of the above code.&lt;br /&gt;
  We have some &lt;span data-descr="collection of words and punctuation"&gt;text&lt;/span&gt; here with a few
  &lt;span data-descr="small popups which also hide again"&gt;tooltips&lt;/span&gt;.&lt;br /&gt;
  Don't be shy, hover over to take a &lt;span data-descr="not to be taken literally"&gt;look&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="Resultat_3">Resultat</h4>

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

<h2 id="Especificacions">Especificacions</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}</td>
   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
   <td><span id="result_box" lang="ca"><span>No hi ha canvis</span> <span>significatius</span> <span>en l'especificació</span> <span>anterior.</span></span></td>
  </tr>
  <tr>
   <td>{{Specname("CSS3 Transitions", "#animatable-properties", "transitions on pseudo-element properties")}}</td>
   <td>{{Spec2("CSS3 Transitions")}}</td>
   <td>Permet transicions en les propietats definides en els pseudo-elements.</td>
  </tr>
  <tr>
   <td>{{Specname("CSS3 Animations", "", "animations on pseudo-element properties")}}</td>
   <td>{{Spec2("CSS3 Animations")}}</td>
   <td>Permet animacions en les propietats definides en els pseudo-elements.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}</td>
   <td>{{Spec2('CSS3 Selectors')}}</td>
   <td><span class="short_text" id="result_box" lang="ca"><span>Introdueix la</span> <span>sintaxi</span> <span>de </span></span> dos caràcters de dos punts <span class="short_text" lang="ca"><span>.</span></span></td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Definició inicial, utilitzant la sintaxi d'un  caràcter de dos punts.</td>
  </tr>
 </tbody>
</table>

<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Descripció</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>suport <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>suport <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>Suport d'animacions i transicions</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>Descripció</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>suport <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>suport <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>Suport d'animacions i transicions</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] Firefox anterior a la versió 3.5 només implementa la versió CSS 2.0 de <code>:after</code>. No es permet {{cssxref("position")}}, {{cssxref("float")}}, <code>list-style-*</code> i algunes propietats de pantalla. Firefox 3.5 elimina aquestes restriccions.</p>

<h3 id="Notes_de_Quantum_CSS">Notes de Quantum CSS</h3>

<ul>
 <li>Gecko té un error pel qual els pseudo-elements {{cssxref("::before")}} i <code>::after</code>  se segueixen generant fins i tot si el valor de la propietat {{cssxref("content")}} està establert a <code>normal</code> o <code>none</code>. Segons les especificacions, no hauria de ser ({{bug(1387931)}}). Això s'ha solucionat en el nou motor CSS paral·lel de Firefox (també conegut com <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> o <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>,

  <p>planificat per al seu llançament en Firefox 57).</p>
 </li>
</ul>

<h2 id="Vegeu_també">Vegeu també</h2>

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