Lepseudo-élémentCSS::after crée un pseudo-élément qui sera le dernier enfant de l'élément ciblé. Généralement utilisé pour ajouter du contenu esthétique à un élément via la propriété CSScontent. Par défaut, l'élément créé est de type en-ligne (inline en anglais).

Exemple interactif

a::after {  content: " (" attr(href) ")";}.dead-link {  text-decoration: line-through;}.dead-link::after {  content: url("/shared-assets/images/examples/warning.svg");  display: inline-block;  width: 12px;  height: 12px;}

<p>  Le voilier tire son nom de sa nageoire dorsale en forme de voile et est  largement considéré comme le poisson le plus rapide de l'océan.  <a href="https://fr.wikipedia.org/wiki/Istiophorus"    >Vous pouvez en lire plus à ce sujet ici</a  >.</p><p>  Le poisson-lion rouge est un poisson scorpion prédateur qui vit sur les récifs  coralliens de l'océan Indo-Pacifique et plus récemment dans l'Atlantique  occidental.  <a href="">Vous pouvez en lire plus à ce sujet ici</a>.</p>

Syntaxe

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

Description

Le pseudo-élément::after est un bloc en ligne (inline box en anglais) générée en tant qu'enfant immédiat de l'élément auquel il est associé, ou l'« élément d'origine ». Il est souvent utilisé pour ajouter du contenu esthétique à un élément via la propriétécontent, comme des icônes, des guillemets ou d'autres décorations.

Les pseudo-éléments::after ne peuvent pas être appliqués auxéléments remplacés tels que<img>, dont le contenu est déterminé par des ressources externes et n'est pas affecté par les styles du document actuel.

Un pseudo-élément::after avec une valeurdisplay delist-item se comporte comme un élément de liste et peut donc générer un pseudo-élément::marker, tout comme un élément<li> le fait.

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

Par défaut, les pseudo-éléments::before et::after partagent le même contexte d'empilement que leur parent. Si aucunz-index n'est explicitement défini, le contenu généré par le pseudo-élément::after apparaîtra au-dessus du contenu généré par le pseudo-élément::before parce que::after est rendu plus tard dans le flux DOM.

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.

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>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>Contribuer à MDN est facile et amusant.</p>

CSS

.texte-interessant::after {  content: "<- cela est intéressant";  color: darkgreen;  font-weight: bolder;}.texte-ennuyeux::after {  content: "<- un peu ennuyeux";  color: darkviolet;  font-weight: bolder;}

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>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 lepseudo-élément::after avec l'expression CSSattr() 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 untabindex de0 pour faire unspan 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 tabindex="0" data-description="collection de mots et de ponctuation"    >texte</span  >  ici avec quelques  <span    tabindex="0"    data-description="petites fenêtres surgissantes qui se cachent aussi"    >bulles d'information</span  >  .</p>

CSS

span[data-description] {  position: relative;  text-decoration: underline;  color: blue;  cursor: help;}span[data-description]:hover::after,span[data-description]:focus::after {  content: attr(data-description);  position: absolute;  left: 0;  top: 24px;  min-width: 200px;  border: 1px #aaaaaa solid;  border-radius: 10px;  background-color: #ffffcc;  padding: 12px;  color: black;  font-size: 14px;  z-index: 1;}

Résultat

Les pseudo-éléments imbriqués::after::marker

Lespseudo-éléments imbriqués::after::marker sélectionnent la liste::marker d'un::after pseudo-élément qui est lui-même un élément de liste, c'est-à-dire qu'il a sadisplay propriété définie surlist-item.

Dans cette présentation, nous générons des éléments de liste supplémentaires avant et après un menu de navigation en liste à l'aide de::before et::after (en les définissant surdisplay: list-item afin qu'ils se comportent comme des éléments de liste). Nous utilisons ensuiteul::before::marker etul::after::marker pour donner à leurs marqueurs de liste une couleur différente.

HTML

<ul>  <li><a href="#">Introduction</a></li>  <li><a href="#">Débuter</a></li>  <li><a href="#">Comprendre les bases</a></li></ul>

CSS

ul {  font-size: 1.5rem;  font-family: Arial, Helvetica, sans-serif;}ul::before,ul::after {  display: list-item;  color: orange;}ul::before {  content: "Début";}ul::after {  content: "Fin";}ul::before::marker,ul::after::marker {  color: red;}

Résultat

Lorsqu'on utilise des pseudo-éléments imbriqués, les puces de liste des trois éléments de navigation sont générées car ce sont des éléments<li>, « Début » et « Fin » ont été insérés via des pseudo-éléments et::marker est utilisé pour styliser leurs puces.

Spécifications

Compatibilité des navigateurs

Voir aussi

• ::before
• content