En CSS, ::after crée un pseudo-élément qui sera le dernier enfant de l'élément sélectionné. Il est souvent utilisé pour ajouter du contenu cosmétique à un élément, en utilisant la propriété CSS content. Par défaut, ce contenu est de type « en ligne ».

/* Ajoute une flèche après les liens */
a:after {
  content: "→";
}

Note : les pseudo-éléments générés par ::before et ::after sont contenus dans la boîte de mise en forme de l'élément. Aussi, ::before et ::after ne s'appliquent pas aux éléments remplacés tels que les éléments <img> ou <br>.

Syntaxe

/* CSS3 syntax */
::after

/* CSS2 syntax */
:after

Note : CSS3 a introduit la notation ::after  (avec deux deux-points) pour distinguer les pseudo-classes des pseudo-éléments. Les navigateurs acceptent aussi:after, introduite dans CSS2.

Exemples

Utilisation simple

Nous allons ici créer deux classes : une pour les paragraphes ennuyeux et une pour les intéressants. Nous marquerons ensuite chacun de ces paragraphes en ajoutant un pseudo-élément après chacun d’eux.

HTML

<p class="texte-ennuyeux">Voici un peu de vieux texte ennuyeux ordinaire.</p>
<p>Voici un peu de texte normal qui n'est ni ennuyeux, ni intéressant.</p>
<p class="texte-interessant">Contribuer à MDN est facile et amusant.
  Cliquez simplement sur le bouton Modifier pour ajouter de nouveaux exemples vivants, ou améliorer ceux existants.</p>

CSS

.texte-interessant::after {
  content: "<- maintenant, cela *est* intéressant !"; 
  color: green;
}

.texte-ennuyeux::after {
  content: "<- ENNUYEUX !";
  color: red;
}

Résultat

Exemple décoratif

On peut mettre en forme du texte ou des images avec la propriété content à peu près de quelque manière que nous le voulions :

HTML

<span class="ruban">Observez où se trouve la boîte orange.</span>

CSS

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

.ruban::after {
  content: "Voyez cette boîte orange.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

Résultat

Bulles d’information

Dans l'exemple suivant, on illustre le pseudo-élément ::after avec l'expression CSS attr() et un attribut de données personnalisé data-descr afin de créer une bulle d'information de type glossaire en CSS pur.

HTML

<p>Voici l’exemple en action du code ci-dessus.<br />
  Nous avons un peu de <span data-descr="collection de mots et de ponctuation">texte</span> 
  ici avec quelques <span data-descr="petites fenêtres surgissantes qui se cachent aussi">
  bulles d’information</span>.<br />
  Ne soyez pas timide, survolez le texte pour jeter un <span data-descr="à ne pas prendre au sens littéral">œil</span>.
</p>

CSS

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

Résultat

Spécifications

Spécifications Statut Commentaire
CSS Pseudo-Elements Level 4
La définition de '::after' dans cette spécification.
Version de travail Pas de changement significatif depuis la spécification précédente.
CSS Transitions Version de travail Permet les transitions sur les propriétés définies sur les pseudo-éléments.
CSS Animations Version de travail Permet les animations sur les propriétés définies sur les pseudo-éléments.
Selectors Level 3
La définition de '::after' dans cette spécification.
Recommendation Introduit la syntaxe à deux deux-points.
CSS Level 2 (Revision 1)
La définition de '::after' dans cette spécification.
Recommendation Définition initiale, utilisant la syntaxe à un deux-points.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet Oui
Support complet Oui
Support complet Oui
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : :after
Edge Support complet Oui
Support complet Oui
Support complet Oui
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : :after
Firefox Support complet 1.5
Notes
Support complet 1.5
Notes
Notes Before Firefox 57, Firefox had a bug where ::after pseudo-elements were still generated, even if the content property value were set to normal or none.
Notes Before Firefox 3.5, only the CSS level 2 behavior of :after was supported, which disallowed position, float, list-style-* and some display properties.
Support complet 1
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : :after
IE Support complet 9
Support complet 9
Support complet 8
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : :after
Opera Support complet 7
Support complet 7
Support complet 4
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : :after
Safari Support complet 4
Support complet 4
Support complet 4
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : :after
WebView Android Support complet Oui
Support complet Oui
Support complet Oui
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : :after
Chrome Android ? Edge Mobile Support complet Oui
Support complet Oui
Support complet Oui
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : :after
Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Animation and transition supportChrome Support complet 26Edge Support complet OuiFirefox Support complet 4IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Support complet OuiChrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité utilise un nom non-standard.

Voir aussi

Étiquettes et contributeurs liés au document

Dernière mise à jour par : SphinxKnight,