Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Le pseudo-élément CSS ::after cible le dernier enfant virtuel de l'élément sélectionné et est généralement utilisé pour ajouter du contenu esthétique à un élément, en utilisant la propriété CSS content. C'est un élément de type en-ligne par défaut.

Syntaxe

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

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

La notation ::after a été introduite avec CSS 3 de manière à différencier les pseudo-classes et les pseudo-éléments. Les navigateurs acceptent aussi la notation :after introduite dans CSS 2.

Exemples

Utilisation simple

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

CSS

.texte-interessant::after {
  content: "<- Là, ça devient intéressant !"; 
  color: green;
}

.texte-ennuyeux::after {
  content: "<- On s'ennuie !";
  color: red;
}

HTML

<p class="texte-ennuyeux">
  Du texte bien barbant.
</p>
<p>
  Du texte ni ennuyeux, ni intéressant.
</p>
<p class="texte-interessant">
  Contribuer à MDN est facile et divertissant.
  Cliquez simplement sur le bouton Modifier pour 
  ajouter de nouveaux exemples, ou améliorer ceux existants.
</p>

Résultat

Exemple décoratif

On peut mettre en forme du texte ou des images avec la propriété content :

CSS

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

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

HTML

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

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.

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

HTML

<p>Voici l’exemple en action du code ci-dessus.<br />
  Ce <span data-descr="collection de mots et de ponctuation">texte</span> 
  a quelques <span data-descr="petites fenêtres surgissantes qui s’affichent au survol d’un élément">
  bulles d’information</span>.<br />
  Ne soyez pas timide, survolez le texte pour 
  <span data-descr="à ne pas prendre au sens propre">jetez un œil</span>.
</p>

Résultat

Spécifications

Spécifications État Commentaires
CSS Pseudo-Elements Level 4
La définition de '::after' dans cette spécification.
Version de travail Aucun 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 à double deux-points.
CSS Level 2 (Revision 1)
La définition de '::after' dans cette spécification.
Recommendation Définition initiale, utilisant la syntaxe à simple deux-points.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
:after (Oui) 1.0 (1.7 ou moins)[1] 8.0 4 4.0
::after (Oui) 1.5 (1.8)[1] 9.0 7 4.0
Prise en charge des animations et des transitions 26 4.0 (2.0) Pas de support Pas de support Pas de support
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
:after (Oui) ? ? ? ?
::after (Oui) ? ? ? ?
Prise en charge des animations et des transitions (Oui) 4.0 (4.0) Pas de support Pas de support Pas de support

[1] Avant Firefox 3.5, seule la version CSS 2.0 :after était implémentée. Des propriétés comme position, float, list-style-* ou autres liées à l'affichage ne pouvait pas être utilisées. Firefox 3.5 a retiré ces restrictions.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Dernière mise à jour par : SphinxKnight,