::after

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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 esthétique à un élément, en utilisant la propriété CSS content. Par défaut, ce contenu est de type en ligne (inline en anglais).

Exemple interactif

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

css
::after {
  content: /* valeur */;
  /* propriétés */
}

Si la propriété content n'est pas indiquée, contient une valeur invalide, vaut normal, ou vaut none, le pseudo-élément ::after ne sera pas rendu à l'écran. Il se comportera comme si display: none avait été appliqué.

Note : CSS a introduit la notation ::after (avec deux deux-points) pour distinguer les pseudo-classes des pseudo-éléments. Les navigateurs acceptent aussi la notation :after, introduite précédemment, à des fins de rétro-compatibilité.

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

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.</p>

CSS

css
.texte-interessant::after {
  content: "<- cela est intéressant";
  color: green;
}

.texte-ennuyeux::after {
  content: "<- un peu 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

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

CSS

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, sans JavaScript.

On peut également aider les personnes qui naviguent au clavier avec cette technique, en ajoutant un tabindex de 0 pour faire un span focusable, et en utilisant la sélection :focus. Cela montre à quel point les options ::before and ::after peuvent être flexibles, bien que, pour l'expérience la plus accessible, un widget de divulgation sémantique créé d'une autre manière serait probablement plus approprié.

HTML

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
  >
  .
</p>

CSS

css
span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00f;
  cursor: help;
}

span[data-descr]:hover::after,
span[data-descr]:focus::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

Accessibilité

Utiliser un pseudo-élément ::after afin d'ajouter du contenu est déconseillé, car ce dernier n'est pas accessible de façon fiable pour les lecteurs d'écrans.

Spécifications

Specification
CSS Pseudo-Elements Module Level 4
# generated-content

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi