Les auteurs peuvent spécifier le style et l'emplacement d'un contenu généré avec les pseudo-éléments :before et :after. Comme leurs noms l'indiquent, :before et :after spécifient l'emplacement du contenu avant et après le contenu d'un élément dans l'arborescence du document.

La propriété content, en conjonction avec ces pseudo-éléments, indique ce qui est inséré avant ou après le contenu d'un élément.

La pseudo-élément :before {...} permet d'affecter un contenu avant le contenu initial d'un élément.
La pseudo-élément :after {...} permet d'affecter un contenu après le contenu initial d'un élément.
p:before { content: "* " }
p:after { content: ". " }
<p>Texte</p>
Affiche : * Texte.
Exemple
<html>
  <head> 
    <style>
      <--
      Balise:before... {Propriété1:Valeur1;...}
      Balise:after... {Propriété1:Valeur1;...}
      ...
      Règles de style
      ...
      -->
    </style>
    ...
  </head>
  <body>
    <Balise>Contenu... </Balise>
    ...
    Diverses commandes HTML
    ...
  </body>
</html>
Compatibilité
Windows Macintosh
NE4 NE6 NE7 IE5 IE55 IE6 OP5 OP6 OP7 NE4 NE6 NE7 IE4 IE5