::before (:before)

This translation is incomplete. Please help translate this article from English.

Sumari

::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).

Sintaxi

/* CSS3 syntax */
::before { style properties }

/* CSS2 syntax */
:before { style properties }

La notació ::before (amb dos punts dobles) es va introduir en CSS 3 a fi d'establir una discriminació entre pseudo-classes i pseudo-elements. Els navegadors accepten també la notació :before introduïda en CSS 2.

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

Sortida

Exemple Decorativu

Podem donar estil de text o imatges en la propietat content gairebé de la 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;
}

Sortida

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.

Sortida

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

Sortida

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 punts.
CSS Level 2 (Revision 1)
The definition of '::before' in that specification.
Recommendation Definició inicial, utilitzant la sintaxi d'un punt.

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
suport :before (Yes) 1.0 (1.7 or earlier)[1] 8.0 4 4.0
suport ::before (Yes) 1.5 (1.8)[1] 9.0 7 4.0
Suport de animacions i transicions 26 4.0 (2.0) No support No support No support
Característica Android Chrome Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
suport :before (Yes) (Yes) (Yes) ? ? ?
suport ::before (Yes) (Yes) (Yes) 7.1 ? 5.1
Suport de animacions i transicions 26 (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.

Veure

Document Tags and Contributors

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