CSS ::after Pseudo-élément

Le pseudo-élément CSS ::after crée un élément supplémentaire inséré en tant que dernier enfant de l'élément ciblé, juste après son contenu réel. Vous n'ajoutez aucune balise à votre HTML — le navigateur génère l'élément à partir de votre feuille de style. Cette page explique ce qu'est ::after, comment fonctionne la propriété content (obligatoire), les pièges à éviter et les cas d'usage où il est vraiment utile.

Qu'est-ce que `::after`

::after vous permet d'attacher du contenu généré — caractères, chaînes de texte, image ou forme décorative — à la fin d'un élément sans toucher au HTML du document. Comme la boîte générée fait partie de l'élément, vous pouvez l'animer, la positionner ou la faire flotter comme n'importe quel contenu normal.

Deux règles sont essentielles :

La propriété content est obligatoire. Si vous omettez content, le pseudo-élément n'est jamais créé. Utilisez content: "" (une chaîne vide) lorsque vous souhaitez uniquement une boîte décorative sans texte.
Par défaut, la boîte est en ligne (inline). Définissez display: block (ou inline-block) si vous avez besoin que la largeur, la hauteur ou les marges verticales prennent effet.

`::after` vs `:after`

::after peut aussi s'écrire avec la notation à deux-points simples :after. La forme à deux-points doubles est la norme CSS3 moderne pour les pseudo-éléments (afin de les distinguer des pseudo-classes comme :hover) ; la forme à un seul deux-points n'existe que pour la compatibilité ascendante avec les anciens navigateurs. Préférez ::after sauf si vous devez prendre en charge des moteurs obsolètes comme Internet Explorer 8.

`::after` vs `::before`

Le pseudo-élément ::before insère du contenu généré avant le contenu de l'élément, tandis que ::after l'insère après. Ils sont par ailleurs identiques et souvent utilisés ensemble — par exemple, ::before et ::after sont la façon classique d'ajouter des guillemets ouvrants et fermants ou des crochets décoratifs appariés autour d'un titre.

Avertissement

Le contenu généré ne fait pas partie du DOM : il ne peut pas être sélectionné par l'utilisateur, et la plupart des lecteurs d'écran l'ignorent (la prise en charge est incohérente selon les navigateurs). Utilisez ::after uniquement pour du contenu purement décoratif ou complémentaire — ne placez jamais dans content une information que l'utilisateur doit lire.

Info

Les pseudo-éléments créés avec ::after et ::before ne s'appliquent pas aux éléments remplacés tels que <img> et <br>, car ces éléments n'ont pas de contenu de document autour duquel insérer du contenu généré.

Version

CSS Pseudo-Elements Level 4

Selectors Level 3

Syntaxe

Pseudo-élément CSS ::after

::after {
  css declarations;
}

Exemple du pseudo-élément `::after` :

Exemple CSS ::after

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::after { 
        content: " - William Shakespeare.";
      }
    </style>
  </head>
  <body>
    <h2>::after selector example</h2>
    <p>"Be or not to be"</p>
  </body>
</html>

Essayez vous-même »

Dans l'exemple suivant, des styles peuvent être appliqués au contenu.

Exemple du pseudo-élément `::after` avec du contenu stylisé :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::after { 
        content: " - William Shakespeare.";
        background-color: #eee;
        color: #1c87c9;
        padding: 5px 3px;
        border: 2px dashed #000;
        margin-left: 5px;
      }
    </style>
  </head>
  <body>
    <h2>::after selector example</h2>
    <p>"Be or not to be"</p>
  </body>
</html>

Essayez vous-même »

Cas d'usage courants

::after excelle chaque fois que vous souhaitez ajouter du contenu visuel sans alourdir votre balisage :

Formes décoratives et séparateurs. Une boîte construite avec content: "" et une border ou un background — soulignements, flèches, rubans, queues de bulle.
Icônes après les liens. Ajoutez une flèche de lien externe ou un indicateur de type de fichier après un <a>.
L'astuce clearfix. Forcer un parent à contenir ses enfants flottants.

/* External-link arrow after every link with target="_blank" */
a[target="_blank"]::after {
  content: " ↗";
}

/* Clearfix: make a container wrap its floated children */
.clearfix::after {
  content: "";
  display: block;   /* block + clear pushes the box below the floats */
  clear: both;
}

Notez le content: "" vide dans le clearfix : il crée la boîte sans aucun texte visible, ce qui est exactement ce que l'on souhaite pour un helper purement dédié à la mise en page.

Conseils et pièges

Pas de content, pas d'élément. Oublier la propriété content est la raison la plus courante pour laquelle une règle ::after « ne fait rien ».
Définir display pour le dimensionnement. Un pseudo-élément en ligne ignore width, height et les marges haut/bas. Utilisez display: block ou inline-block.
Hygiène des guillemets. Dans les chaînes content, échappez les caractères spéciaux avec leur code Unicode (ex. content: "\00BB" pour ») afin que l'encodage du fichier ne les altère pas.

Pratique

Que fait le pseudo-élément ::after en CSS ?

Il insère du contenu avant l'élément sélectionné.Il insère du contenu après l'élément sélectionné.Il permet de styliser le texte sélectionné.Il est utilisé conjointement avec la propriété content.

Qu'est-ce que ::after

::after vs :after

::after vs ::before