initial commit

1 files changed, 260 insertions, 0 deletions

diff --git a/files/ca/web/css/_doublecolon_after/index.html b/files/ca/web/css/_doublecolon_after/index.html
new file mode 100644
index 0000000000..95161d7f25
--- /dev/null
+++ b/files/ca/web/css/_doublecolon_after/index.html
@@ -0,0 +1,260 @@
+---
+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>