diff options
Diffstat (limited to 'files/ca/web/css/_doublecolon_after/index.html')
| -rw-r--r-- | files/ca/web/css/_doublecolon_after/index.html | 260 |
1 files changed, 0 insertions, 260 deletions
diff --git a/files/ca/web/css/_doublecolon_after/index.html b/files/ca/web/css/_doublecolon_after/index.html deleted file mode 100644 index 39c21a6e8e..0000000000 --- a/files/ca/web/css/_doublecolon_after/index.html +++ /dev/null @@ -1,260 +0,0 @@ ---- -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> - -{{csssyntax}} - -<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"><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></pre> - -<pre class="brush: css">.exciting-text::after { - content: "<- now this *is* exciting!"; - color: green; -} - -.boring-text::after { - content: "<- 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"><span class="ribbon">Notice where the orange box is.</span></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"><p>Here is the live example of the above code.<br /> - We have some <span data-descr="collection of words and punctuation">text</span> here with a few - <span data-descr="small popups which also hide again">tooltips</span>.<br /> - Don't be shy, hover over to take a <span data-descr="not to be taken literally">look</span>. -</p> -</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> |