Le pseudo-élément ::after est utilisé en CSS pour insérer du contenu après le contenu spécifié. Il est souvent utilisé pour ajouter du style ou du contenu décoratif sans avoir à modifier le HTML.
Voici un exemple de base sur comment utiliser le pseudo-élément ::after :
```
element::after {
content: “ “;
display: block;
width: 50px;
height: 50px;
background: red;
}
```
Dans cet exemple, nous ajoutons un carré rouge après chaque élément correspondant.
Maintenant, voici comment vous pourriez utiliser ::after pour ajouter une icône après un lien externe :
```
a[rel=“external”]::after {
content: ‘ \2197’; /* Unicode pour la flèche en diagonale vers le haut à droite */
font-size: 0.8em;
}
```
Il est important de noter que le pseudo-élément ::after ne fonctionnera pas sur des éléments vides ou des éléments auto-fermants (comme `img` ou `input`), car il n’y a pas de contenu après lequel insérer quoi que ce soit.
Enfin, le pseudo-élément ::after est généré en tant qu’enfant de l’élément auquel vous l’appliquez. Il n’est pas inséré dans l’arborescence du DOM, donc vous ne pouvez pas le cibler avec JavaScript ou le voir dans les outils de développement de votre navigateur, mais vous pouvez le styliser avec CSS.
