::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
::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
<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
.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
<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, 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
<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
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