• Introduction aux pseudo-elements :before et :after

• Le pseudo-element :before

• Le pseudo-element :after

• Combiner :before ou :after avec :first-letter

• Générer une Image avec la propriété CSS content

• Exemple des pseudo-classes :before et :after avec du texte et images

• A propos du contenu généré par :before et :after (inconvénients)

Introduction aux pseudo-elements :before et :after

Ces deux pseudo-classes permettent de générer dynamiquement du contenu (texte ou image) avant ou après une balise (<p>, <blockquote>, <td> etc.), Ceci permet de diminuer la taille du fichier xhtml (bonne gestion de l'espace disque fourni par votre hébergeur et rapidité de téléchargement des pages de votre site) et d'épargner les webmasters fainéants du travail. Mais ces deux pseudo-elements représentent certains inconvénients qu'on va voir à la fin de ce chapitre.

Le pseudo-element :before

Supposons que vous allez créer un site en psychanalyse. Bien sûr que votre projet sera bourré de citations de Sigmund Freud, puisque c'est le fondateur de la psychanalyse. Pour éviter d'écrire à chaque fois "Sigmund Freud a dit dans son livre intitulé "la psychanalyse" : " ou quelque chose qui ressemble à cela avant chaque citation vous n'avez qu'à vous servir de ":before". On va créer une classe appelée citation :

.citation:before {
content: "Sigmund Freud a dit dans son livre intitulé La psychanalyse : ";
font-style: italic; /* en italic */
color: blue; /* en bleu */
}
  

Commentaires

• notez bien qu'on peut aussi combiner pseudo-elements et classes (ou id). La notation ".citation:before" signifie que le contenu dynamique sera ajouté avant le texte de chaque balise qui a reçu la classe "citation".
• remarquez qu'on déclare le contenu dynamique avec la notation : "content" qui signifie Humm... Je crois que ce n'est la peine, car mes apprentis ont largement mûri
• remarquez qu'on peut aussi ajouter d'autres propriétés de style qui seront appliquées au contenu généré dynamiquement.

Après, dans le corps de votre page mettez par exemple :

<blockquote><p class="citation">la personnalité s'est formée à partir du
refoulement dans l'inconscient de situations de situations vécues dans
l'enfance comme sources d'angoisse et de culpabilité</p></blockquote>

Ceci va donner comme résultat :

la personnalité s'est formée à partir du refoulement dans l'inconscient de situations de situations vécues dans l'enfance comme sources d'angoisse et de culpabilité

Le pseudo-element :after

Pour ajouter une mention qui indique la fin de la citation comme par exemple le mot "fin" ou points de suspension, le code CSS deviendra :

.citation:before {
content: "Sigmund Freud a dit dans son livre La psychanalyse : ";
font-style: italic; /* en italique  */
color: blue; /* en bleu */
}
.citation:after {
content: " Fin.";
font-style: italic; /* en italique  */
color: blue; /* en bleu */
} 

Voici le résultat de la même citation :

la personnalité s'est formée à partir du refoulement dans l'inconscient de situations vécues dans l'enfance comme sources d'angoisse et de culpabilité.

Il y a une question très pertinente : si je veux mettre guillemets ("..") dans le contenu dynamique, comment vais-je procéder ? très bonne question.
En fait on va pas mettre directement les guillemets comme ça :
content: "Sigmund Freud a dit dans son livre "La psychanalyse" : ";
Car elles constituent des caractères spéciaux, qui peuvent potentiellement créer des conflits avec les délimiteurs (guillemets) de la valeur de la propriété CSS content. Pour qu'ils soient interprétés comme des caractères normaux vous devez les faire précéder par un antislash "\" :
content: "Sigmund Freud a dit dans son livre \"La psychanalyse\" : ";

.citation:before {
content: "Sigmund Freud a dit dans son livre \"La psychanalyse\" : ";
font-style: italic; /* en italique  */
color: blue; /* en bleu */
}

Voici le résultat :

la personnalité s'est formée à partir du refoulement dans l'inconscient de situations vécues dans l'enfance comme sources d'angoisse et de culpabilité.

Combiner :before ou :after avec :first-letter

Vous pouvez mélanger les pseudo-elements :before et :after avec la pseudo-classe :first-letter. Exemple :

.citation:before {
content: "Sigmund Freud a dit dans son livre La psychanalyse : ";
font-style: italic; /* en italique  */
color: blue; /* en bleu */
}
.citation:first-letter {
color: red;
font-size: 140%;
}

C'est la première lettre du contenu dynamique qui va avoir une couleur rouge et une taille de 140% (en l'occurrence : Sigmund Freud a dit dans son livre La "psychanalyse" : ), Ceci est aussi valable pour ":before". Avant de continuer je tiens à vous dire que les pseudo-formats :before et :after ne sont pas pris en compte par Internet Explorer 6 et 7.

Générer une Image avec la propriété CSS content

Vous pouvez générer une image avec la propriété CSS content. Pour ce faire vous n'avez qu'à taper :

.bien:before {
content: url("applaudir.gif");
}
.bien:after {
content: url("bravo.gif");
}
Puis mettre : 
<p class="bien">Toutes mes félicitations ! Votre réponse est juste</p> 
  

Voici le rendu visuel :

toutes mes félicitations ! Votre réponse est juste

Le résultat est plus ou moins satisfaisant. Pour l'améliorer davantage, on ferait mieux de mettre une espace après la première image et une espace avant la deuxième image. Le code CSS deviendra :

.bien:before {
content:url("applaudir.gif")" "; /* les guillemets à la fin servent à introduire une espace */ 
}
.bien:after {
content:" "url("bravo.gif");  /* les guillemets au début servent à introduire une espace */ 
}
  

Le résultat est plus agréable :

Toutes mes félicitations ! Votre réponse est juste

N'oubliez surtout pas que l'URL de l'image doit être spécifiée en fonction de la feuille de style, si vous y avez déclaré votre code CSS. Sinon par rapport à la page XHTML, si vous avez écrit le code CSS dans l'en-tête de votre page. Maintenant passant à un exemple qui rassemble tout ce qu'on vient de voir

Exemple des pseudo-classes :before et :after avec du texte et images

Code XHTML/CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>les pseudo-elements :before et :after</title>
<style type="text/CSS">
td.Prix:before { content:"Prix : "; }
td.Prix:after  { content:" Dollars (1$ = 0,8€)"; }
td.Produit:before { content:url("maison.png")" "; }
td.Produit:after  { content:" "attr(title); }
</style>
</head>
<body>
<table>
<tr>
<td class="Produit" title="(achat en 6 mensualités)">maison </td>
<td class="Prix">70000</td>
</tr>
<tr>
<td class="Produit" title="(achat en un seul paiement)">maison</td>
<td class="Prix">60000</td>
</tr>
</table>
</body>
</html>
  

Voici le rendu visuel :

maison	70000
maison	60000

Commentaires :

• la mention : td.Prix:before { content:"Prix : "; } signifie que le contenu dynamique ne sera ajouté qu'aux balises <td> dotées de la classe ".Prix" ;
• la mention : td.Produit:after { content:" "attr(title); } signifie que le contenu dynamique sera une espace suivie de la valeur de l'attribut "title" de la balise qui a reçu la classe "Produit". On met le mot-clé "attr" suivi de n'importe quel attribut entre parenthèses (id, name, value etc.).

A propos du contenu généré par :before et :after (inconvénients)

Sachez que le contenu généré par les deux pseudo-elements :after et :before ne fait pas partie du flux XHTML, ce qui fait qu'il ne pourra pas être :

• sélectionné par la souris (tous les navigateurs à part Opera) ;
• indexé par les moteurs de recherche. Voir le chapitre : éviter le contenu dynamique (Ajax et Flash) Pour un bon référencement ;
• accessible aux non-voyants. Car les images affichées dynamiquement par les pseudo-elements ne peuvent pas recevoir l'attribut alt (images accessibles avec un texte alternatif grâce à l'attribut alt) ;
• accédé par les scripts JavaScript.

Pour vous assurez que le JavaScript ignore totalement le texte généré par les pseudo-elements. Cliquez sur les deux citations suivantes pour identifier le contenu reconnu par le JavaScript :

Citation 100% XHTML

Sigmund Freud a dit dans son livre La psychanalyse : la personnalité s'est formée à partir du refoulement dans l'inconscient de situations vécues dans l'enfance comme sources d'angoisse et de culpabilité.

Citation XHTML/CSS

la personnalité s'est formée à partir du refoulement dans l'inconscient de situations vécues dans l'enfance comme sources d'angoisse et de culpabilité.

J'ai vidé tout mon sac, et je n'ai plus rien à vous ajouter. A présent, veuillez passer au chapitre suivant : les propriétés CSS d'arrière-plan (background).