Pseudo-élément ::after CSS

Définition et utilisation

CSS ::after Les pseudo-éléments sont utilisés pour insérer du contenu après le contenu d'un élément spécifié.

Utiliser content L'attribut spécifie le contenu à insérer. La valeur de content peut être :

• Chaîne : content: "Hello world!";
• Image : content: url(myimage.jpg);
• Pas de contenu : content: none;
• Compteur : content: counter(li);
• Guillemets : content: close-quote;
• Valeur de l'attribut : content: " (" attr(href) ")";

Astuce :Veuillez noter que le contenu inséré reste à l'intérieur de l'élément spécifié. Le contenu inséré est ajouté après d'autres contenus internes à l'élément.

Utiliser ::before Insérer du contenu avant le contenu d'un élément spécifique.

Exemple

Exemple 1

Insérez une chaîne après le contenu de chaque élément <p> :

p::after {
  content: " - N'oubliez pas ceci";
}

Essayer par vous-même

Exemple 2

Insérez une chaîne après le contenu de chaque élément <p> et définissez le style du contenu inséré :

p::after {
  content: " - N'oubliez pas ceci";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

Essayer par vous-même

Grammaire CSS

::after {
  déclarations css;
}

Détails techniques

Prise en charge du navigateur

Les nombres dans le tableau des navigateurs indiquent la première version du navigateur qui prend en charge pleinement cet élément pseudo.

Pages associées

Tutoriel :Élément pseudo-CSS

Référence :Pseudo-élément ::before CSS