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

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple

Oui

Oui1

Oui

Oui1

1.52 3

11

9

81

7

41

4

41

Animation and transition support26 Oui4 Non Non Non
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple

Oui

Oui1

?

Oui

Oui1

? ? ? ?
Animation and transition support Oui ? Oui4 Non Non ?

1. Supported as :after.

2. 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.

3. Before Firefox 3.5, only the CSS level 2 behavior of :after was supported, which disallowed position, float, list-style-* and some display properties.

Voir aussi

Étiquettes et contributeurs liés au document

Dernière mise à jour par : SphinxKnight,