Pseudo-élément ::after en CSS

En CSS, ::after crée un pseudo-élément qui est le dernier enfant de l'élément sélectionné. Il génère du contenu qui apparaît après le contenu original de l'élément. Il peut être utilisé pour insérer des caractères, des chaînes de texte ou des images.

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

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

Il peut être animé, positionné ou flotté comme n'importe quel autre contenu.

Le pseudo-élément ::after peut également être utilisé avec la notation à deux-points unique :after, qui est prise en charge par tous les navigateurs.

Le pseudo-élément ::before ajoute du contenu avant tout autre contenu, tandis que le pseudo-élément ::after ajoute du contenu après tout autre contenu en HTML.

INFO

Les pseudo-éléments créés avec ::after et ::before ne s'appliquent pas aux éléments remplacés (par ex., <br>, <img>).

Version

CSS Pseudo-Elements Level 4

Selectors Level 3

Syntaxe

Pseudo-élément ::after en CSS

css

::after {
  css declarations;
}

Exemple du pseudo-élément `::after` :

Exemple CSS ::after

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::after { 
        content: " - William Shakespeare.";
      }
    </style>
  </head>
  <body>
    <h2>::after selector example</h2>
    <p>"Be or not to be"</p>
  </body>
</html>

Try it Yourself »

Dans l'exemple suivant, des styles peuvent être ajoutés au contenu.

Exemple du pseudo-élément `::after` avec du contenu stylisé :

Exemple du pseudo-élément ::after avec du contenu stylisé :

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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>::after selector example</h2>
    <p>"Be or not to be"</p>
  </body>
</html>

Try it Yourself »

Pratique

Que fait le pseudo-élément ::after en CSS ?

Il insère du contenu avant l'élément sélectionné.Il insère du contenu après l'élément sélectionné.Il vous permet de styliser le texte sélectionné.Il est utilisé conjointement avec la propriété content.

Pseudo-élément ::after en CSS ​

Version ​

Syntaxe ​

Exemple du pseudo-élément ::after : ​