We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

En CSS, ::after crea un pseudo-element que és l'últim fill de l'element seleccionat. Sovint s'utilitza per afegir contingut cosmètic a un element amb la propietatcontent. Està integrat per defecte.

/* Afegeix una fletxa després d'enllaços */
a::after {
  content: "";
}

Sintaxi

/* CSS3 syntax */
::after

/* CSS2 syntax */
:after

CSS3 va introduir la notació de ::after ( amb dos caràcters de dos punts ) per distingir les pseudo-classes dels pseudo-elements. Els navegadors també accepten :after, 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

Ùs senzill

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 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>
.exciting-text::after {
  content: "<- now this *is* exciting!"; 
  color: green;
}

.boring-text::after {
   content: "<- BORING!";
   color: red;
}

Resultat

Exemple decoratiu

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

<span class="ribbon">Notice where the orange box is.</span>
.ribbon {
  background-color: #5BC8F7;
}

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

Resultat

Tooltips

El següent exemple mostra l'ús del pseudo-element ::after en conjunció amb l'expressió CSS attr() i un atribut de dades personalitzades data-descr per crear un tooltip en pur CSS, similar al glossari. Feu clic en la vista prèvia en viu o vegeu aquest exemple en una pàgina apart.

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

Resultat

Especificacions

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Descripció Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
suport :after (Yes) (Yes) 1.0 (1.7 or earlier)[1] 8.0 4 4.0
suport ::after (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 Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
suport :after (Yes) (Yes) ? ? ? ?
suport ::after (Yes) (Yes) ? ? ? ?
Suport d'animacions i transicions (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 :after. No es permet position, float, list-style-* i algunes propietats de pantalla. Firefox 3.5 elimina aquestes restriccions.

Notes de Quantum CSS

  • 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,