Exemple de code du sélecteur CSS :before.

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

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

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

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