path: root/files/ca/web/css/_doublecolon_before/index.html

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

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

<pre class="brush: css"><code class="language-css"><span class="comment token">/* Add a heart before links */</span>
<span class="selector token">a<span class="pseudo-class token">::before</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>::before</code> ( de 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>:before</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 class="external external-icon" 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 class="external external-icon" 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="Afegint_cometes"><span class="short_text" id="result_box" lang="ca"><span>Afegint</span> <span>cometes</span></span></h3>

<p>Un exemple senzill de l'ús del pseudo-element <code>::before</code> és proporcionar cometes. Aquí s'utilitza tant <code>::before</code> com <code>{{Cssxref("::after")}}</code> per a inserir caràcters cometes.</p>

<h4 id="Contingut_HTML">Contingut HTML</h4>

<pre class="brush:html">&lt;q&gt;Some quotes&lt;/q&gt;, he said, &lt;q&gt;are better than none&lt;/q&gt;.</pre>

<h4 id="Contingut_CSS">Contingut CSS</h4>

<pre class="brush:css">q::before {
  content: "«";
  color: blue;
}
q::after {
  content: "»";
  color: red;
}</pre>

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

<p>{{EmbedLiveSample('Adding_quotation_marks', '500', '50', '')}}</p>

<h3 id="Exemple_Decorativu">Exemple Decorativu</h3>

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

<h4 id="Contingut_HTML_2">Contingut HTML</h4>

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

<h4 id="Contingut_CSS_2">Contingut CSS</h4>

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

.ribbon::before {
  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, 60)}}</p>

<h3 id="Llista_de_tasques"><span id="result_box" lang="ca"><span>Llista de tasques</span></span></h3>

<p><span id="result_box" lang="ca"><span>En aquest</span> <span>exemple</span> <span>crearem</span> <span>una senzilla</span> <span>llista</span> <span>de tasques</span> <span>utilitzant</span> <span>pseudo</span><span>-</span><span>elements.</span> <span>Aquest</span> <span>mètode sovint</span> <span>es</span> <span>pot utilitzar</span> <span>per afegir</span> <span>petits</span> <span>tocs</span> <span>a</span> <span>la interfície</span> <span>d'usuari i</span> <span>millorar</span> <span>l'experiència de l'</span><span>usuari.</span></span></p>

<h4 id="Contingut_HTML_3">Contingut HTML</h4>

<pre class="brush: html">&lt;ul&gt;
  &lt;li&gt;Buy milk&lt;/li&gt;
  &lt;li&gt;Take the dog for a walk&lt;/li&gt;
  &lt;li&gt;Exercise&lt;/li&gt;
  &lt;li&gt;Write code&lt;/li&gt;
  &lt;li&gt;Play music&lt;/li&gt;
  &lt;li&gt;Relax&lt;/li&gt;
&lt;/ul&gt;
</pre>

<h4 id="Contingut_CSS_3">Contingut CSS</h4>

<pre class="brush: css">li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #CCFF99;
}

li.done::before {
  content: '';
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}</pre>

<h4 id="Contingut_JavaScript">Contingut  JavaScript</h4>

<pre class="brush: js">var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if( ev.target.tagName === 'LI') {
     ev.target.classList.toggle('done');
  }
}, false);
</pre>

<p>Aquí està l'exemple del codi anterior executat en directe. Recordeu que no s'han utilitzat icones , i la marca de verificació és en realitat el <code>::before</code> que s'ha donat estil amb CSS. Seguiu endavant i aconseguiu algunes coses per fer.</p>

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

<p>{{EmbedLiveSample('To-do_list', 400, 300)}}</p>

<h2 id="Notes">Notes</h2>

<p>Encara que el posicionament fix en Firefox 3.5 no permet contingut generat per separat com un germà anterior (segons <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content">l'especificació CSS</a> afirma que "Els pseudo-elements :before i :after, son elements que interactuen amb altres caixes ... com si fossin veritables elements inserits dins del seu element associat."), poden ser usats per a proporcionar una lleugera millora en els dissenys sense taules (per exemple, per aconseguir el centrat), sempre que el contingut que es centri estigui embolicat en un fill, una columna abans i després que el contingut pugui ser introduït sense afegir un germà anterior o següent (és a dir, és potser més semànticament correcta afegir un span addicional com s'indica a continuació, del que seria afegir un element &lt;div /&gt; abans i després). (I recordeu sempre afegir un width a un float, ja que, altrament, no surarà!).</p>

<h4 id="Contingut_HTML_4">Contingut  HTML</h4>

<pre class="brush: html">&lt;div class="example"&gt;
&lt;span id="floatme"&gt;"Floated Before" should be generated on the left of the
viewport and not allow overflow in this line to flow under it. Likewise
should "Floated After" appear on the right of the viewport and not allow this
line to flow under it.&lt;/span&gt;
&lt;/div&gt;</pre>

<h4 id="Contingut_CSS_4">Contingut  CSS</h4>

<pre class="brush: css">#floatme { float: left; width: 50%; }

/* To get an empty column, just indicate a hex code for a non-breaking space: \a0 as the content (use \0000a0 when following such a space with other characters) */
.example::before {
  content: "Floated Before";
  float: left;
  width: 25%
}
.example::after {
  content: "Floated After";
  float: right;
  width:25%
}

/* For styling */
.example::before, .example::after, .first {
  background: yellow;
  color: red;
}</pre>

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

<p>{{EmbedLiveSample("Notes")}}</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-before', '::before')}}</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", "")}}</td>
   <td>{{Spec2("CSS3 Transitions")}}</td>
   <td>Permet transicions en les propietats definides en els pseudo-elements.</td>
  </tr>
  <tr>
   <td>{{Specname("CSS3 Animations", "", "")}}</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', '::before')}}</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 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', '::before')}}</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>:before</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.0")}}<sup>[1]</sup></td>
   <td>8.0</td>
   <td>{{CompatOpera("4")}}</td>
   <td>4.0</td>
  </tr>
  <tr>
   <td>Suport <code>::before</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.8")}}<sup>[1]</sup></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>Chrome</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>:before</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>Suport <code>::before</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>7.1</td>
   <td>{{CompatUnknown}}</td>
   <td>5.1</td>
  </tr>
  <tr>
   <td>Suport d'animacions i transicions</td>
   <td>26</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 :before. 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="Quantum_CSS_notes">Quantum CSS notes</h3>

<ul>
 <li>Gecko té un error pel qual els pseudo-elements <a href="https://developer.mozilla.org/ca/docs/Web/CSS/::before" title="::before crea un pseudo-element que és el primer fill de l'element coincident. Sovint s'utilitza per afegir contingut cosmètic a un element mitjançant l'ús de la  propietat content. Aquest element per defecte és en línia (inline)."><code>::before</code></a> i <code>::after</code>  se segueixen generant fins i tot si el valor de la propietat <a class="new" href="https://developer.mozilla.org/ca/docs/Web/CSS/content" title="Aquesta pàgina encara no ha estat traduïda. Si us plau considera contribuir-hi!"><code>content</code></a> està establert a <code>normal</code> o <code>none</code>. Segons les especificacions, no hauria de ser (<a class="external external-icon" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1387931" title="Don't generate pseudo elements for ::before and ::after if content property is 'none' or 'normal'">errada 1387931</a>). Això s'ha solucionat en el nou motor CSS paral·lel de Firefox (també conegut com <a class="external external-icon" href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> o <a class="external external-icon" href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, planificat per al seu llançament en Firefox 57).</li>
</ul>

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

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