Pseudo Élément CSS ::after

Le pseudo-élément ::after est un élément de contenu généré qui ajoute n'importe quel élément après le contenu.

La valeur est définie par la propriété content property.

Par défaut, le pseudo-élément ::after est en ligne (inline).

Le pseudo-élément ::after peut être utilisé pour insérer n'importe quel contenu, y compris des caractères, chaînes de texte et des images.

Il peut être animé, positionné ou flotté comme quelque d'autre contenu.

Le pseudo-élément ::after peut également être utilisé avec une notation ::before qui est supportée par tous les navigateurs.

Version

CSS2

Syntax

::after {
css declarations;
}

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p::after { 
      content: " - William Shakespeare.";
      }
    </style>
  </head>
  <body>
    <h2>Exemple du sélecteur ::after</h2>
    <p>"Être ou ne pas être"</p>
  </body>
</html>

Essayez-vous-même!

Dans l'exemple donné, l'utilisateur peut ajouter des styles au contenu:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple du sélecteur ::after</h2>
    <p>"Être ou ne pas être"</p>
  </body>
</html>