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. |
Navegadors compatibles
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 propietatcontent
està establert anormal
onone
. 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).