This translation is in progress.

En CSS, ::before crea un pseudo-element que és el primer fill de l'element seleccionat. Sovint s'utilitza per afegir contingut cosmètic a un element amb la propietat content. Està integrat per defecte.

/* Add a heart before links */
a::before {
  content: "";
}

Sintaxi

/* CSS3 syntax */
::before

/* CSS2 syntax */
:before

CSS3 va introduir la notació de ::before ( de dos caràcters de dos punts ) per distingir les pseudo-classes dels pseudo-elements. Els navegadors també accepten :before, introduït en CSS2.

Consideracions

Els pseudo-elements generats per ::before i ::after estan continguts per la caixa de formatació de l'element i, per tant  ::before i ::after no s'apliquen als elements reemplaçats com img, or a elements br.

Exemples

Afegint cometes

Un exemple senzill de l'ús del pseudo-element ::before és proporcionar cometes. Aquí s'utilitza tant ::before com ::after per a inserir caràcters cometes.

Contingut HTML

<q>Some quotes</q>, he said, <q>are better than none</q>.

Contingut CSS

q::before { 
  content: "«";
  color: blue;
}
q::after { 
  content: "»";
  color: red;
}

Resultat

Exemple Decorativu

Podem donar estil de text o imatges en la propietat content gairebé de qualsevol manera que vulguem.

Contingut HTML

<span class="ribbon">Notice where the orange box is.</span>

Contingut CSS

.ribbon {
  background-color: #5BC8F7;
}

.ribbon::before {
  content: "Look at this orange box.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

Resultat

Llista de tasques

En aquest exemple crearem una senzilla llista de tasques utilitzant pseudo-elements. Aquest mètode sovint es pot utilitzar per afegir petits tocs a la interfície d'usuari i millorar l'experiència de l'usuari.

Contingut HTML

<ul>
  <li>Buy milk</li>
  <li>Take the dog for a walk</li>
  <li>Exercise</li>
  <li>Write code</li>
  <li>Play music</li>
  <li>Relax</li>
</ul>

Contingut 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;
}

Contingut  JavaScript

var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if( ev.target.tagName === 'LI') {
     ev.target.classList.toggle('done'); 
  }
}, false);

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 ::before que s'ha donat estil amb CSS. Seguiu endavant i aconseguiu algunes coses per fer.

Resultat

Notes

Encara que el posicionament fix en Firefox 3.5 no permet contingut generat per separat com un germà anterior (segons l'especificació CSS 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 <div /> abans i després). (I recordeu sempre afegir un width a un float, ja que, altrament, no surarà!).

Contingut  HTML

<div class="example">
<span id="floatme">"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.</span>
</div>

Contingut  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;
}

Resultat

Especificacions

Especificació Estat Comentari
CSS Pseudo-Elements Level 4
The definition of '::before' in that specification.
Working Draft No hi ha canvis significatius en l'especificació anterior.
CSS Transitions Working Draft Permet transicions en les propietats definides en els pseudo-elements.
CSS Animations Working Draft Permet animacions en les propietats definides en els pseudo-elements.
Selectors Level 3
The definition of '::before' in that specification.
Recommendation Introdueix la sintaxi de dos caràcters de dos punts .
CSS Level 2 (Revision 1)
The definition of '::before' in that specification.
Recommendation Definició inicial, utilitzant la sintaxi d'un caràcter de dos punts .

Descripció Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suport :before (Yes) (Yes) 1.0 (1.7 or earlier)[1] 8.0 4 4.0
Suport ::before (Yes) (Yes) 1.5 (1.8)[1] 9.0 7 4.0
Suport d'animacions i transicions 26 (Yes) 4.0 (2.0) No support No support No support
Descripció Android Chrome Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport :before (Yes) (Yes) (Yes) (Yes) ? ? ?
Suport ::before (Yes) (Yes) (Yes) (Yes) 7.1 ? 5.1
Suport d'animacions i transicions 26 (Yes) (Yes) 4.0 (4.0) No support No support No support

[1] Firefox anterior a la versió 3.5 només implementa la versió CSS 2.0 de :before. No es permet position, float, list-style-* i algunes propietats de pantalla. Firefox 3.5 elimina aquestes restriccions.

Quantum CSS notes

  • Gecko té un error pel qual els pseudo-elements ::before i ::after  se segueixen generant fins i tot si el valor de la propietat content està establert a normal o none. Segons les especificacions, no hauria de ser (errada 1387931). Això s'ha solucionat en el nou motor CSS paral·lel de Firefox (també conegut com Quantum CSS o Stylo, planificat per al seu llançament en Firefox 57).

Vegeu també

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,