Résumé

Le pseudo-élément CSS ::after cible le dernier enfant virtuel de l'élément sélectionné. 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

element:after  { propriétés de style }  /* Syntaxe CSS2 */
element::after { propriétés de style }  /* Syntaxe CSS3 */

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

Usage simple

Créons deux classes, une pour les paragraphes sans intérêt et une pour ceux intéressants. On peux ensuite marquer chaque paragraphe en ajoutant un pseudo-élément après chacun d’eux.

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

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

Sortie

Exemple décoratif

On peut mettre en forme du texte ou des images de la propriété content presque comme on veut.

<span class="ruban">Observez où se trouve la boîte orange.</span>
.ruban {
   background-color: #5BC8F7;
}

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

Sortie

Bulles d’information

L'exemple suivant montre l'utilisation du pseudo-élément ::after avec l'expression CSS attr() et un attribut de données personnalisé data-descr pour créer une bulle d'information de type glossaire en CSS pur.

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

Sortie

Spécifications

Spécifications Statut Commentaires
CSS Pseudo-Elements Level 4
La définition de '::after' dans cette spécification.
Version de travail Aucun changement significatif comparé à 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

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

[1] Avant la version 3.5, Firefox n'implémentait que la version CSS 2.0 de :after. Les propriétés non-éligibles étaient position, float, list-style-* et certaines propriétés d'affichage. Firefox 3.5 enlève ces restrictions.

Voir également

:before, content

Étiquettes et contributeurs liés au document

Dernière mise à jour par : riplay777,