Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Les pseudo-elements :before et :after

Les pseudo-elements :before et :after

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

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 :

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 :

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).

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau