Exemple de code du sélecteur CSS :after.

<style>
.exemple-after-simple-vide:after,
.exemple-after-double-vide:after { content : ''; 
  background-color : green; display : inline-block; width : 20px; height : 20px
}
.exemple-after-simple-texte:after,
.exemple-after-double-texte::after{ content : "c'est cool"; 
 font-size : 25px; color : green; 
}
.exemple-after-simple-image:after,
.exemple-after-double-image::after{
 content : url(/img/screenshot_css/iconeafter.gif)
}
.exemple-after-simple-propertionly:after ,
.exemple-after-double-propertionly::after {  
  color : green; font-size : 25px; 
}
.exemple-after-simple-insert:after,
.exemple-after-double-insert::after {  
  content : '...'; 
}

/* Annule l'insertion de content au survole de la souris */
.exemple:hover:after{ content : none }

.exemple { border:1px solid #666; margin-bottom:10px; padding:5px; }
</style>
 
<div class="exemple exemple-after-simple-texte">:after avec insertion de texte<br>:after avec insertion de texte</div>
<div class="exemple exemple-after-simple-image">:after avec insertion d'image<br>:after avec insertion d'</div>
<div class="exemple exemple-after-simple-vide">:after avec insertion de contenu vide<br>:after avec insertion de contenu vide</div>
<div class="exemple exemple-after-simple-propertionly exemple-after-simple-insert">:after avec définition des propriétés css<br>:after avec insertion de contenu dans un 2ème :after </div>

<div class="exemple exemple-after-double-texte">::after avec insertion de texte<br>::after avec insertion de texte</div>
<div class="exemple exemple-after-double-image">::after avec insertion d'image<br>::after avec insertion d'image</div>
<div class="exemple exemple-after-double-vide">::after avec insertion de contenu vide<br>::after avec insertion de contenu vide</div>
<div class="exemple exemple-after-double-propertionly exemple-after-double-insert">::after avec définition des propriétés css<br>::after avec insertion de contenu dans un 2ème ::after </div>