Pseudo éléments CSS

Les pseudo-éléments CSS

Les pseudo-formats ont encore différentes applications possibles notamment au niveau des paragraphes. Sachant que ceux-ci sont valables aussi pour les autres balises comme les titres, etc. Essayons d'utiliser un style pour changer l'apparence de la première lettre et de la première ligne du texte d'un paragraphe à l'aide des pseudos formats.

Première lettre et première ligne d'un paragraphe

Comme son nom l'indique first-letter ou 'première lettre' est un pseudo-format permettant d'appliquer un style à la première lettre d'un groupe de texte. Créons une sorte d'attraction par exemple, qui permettra au visiteur de distinguer facilement la question aux différentes réponses. On marquera le début de la question en vert et le début d'une réponse en rouge.

Code CSS :

/* La première lettre de la question */
.question:first-letter
{


font-weight: bold; /* En gras */
font-size: 4em;
color: green;


}



/* La première lettre de chaque réponse */
.reponse:first-letter
{


font-weight: bold;
font-size: 4em;
color: red;

}


p
{


text-indent: 20px;

}

Code XHTML :

<p class="question">
Question : Qu'est-ce que le XHTML ?
</p>
<p class="reponse">
Réponse : C'est un langage hybride entre le XML et le HTML
</p>

Styliser la première ligne : first-line

On peut faire pareil pour la première ligne d'un paragraphe mais cette fois-ci avec le pseudo-format : first-line. Cela permet de rendre le paragraphe un peu plus attrayant en mettant en majuscules par exemple la première ligne.

Code CSS :

p:first-line
{


color: #000099; /*bleu*/
font-variant: small-caps ; /*majuscule*/


}

Code XHTML :

<p>
Vous pouvez utiliser le pseudo-élément : first-line pour ajouter un effet spécial à la première ligne d'un paragraphe.
</p>

Pseudo éléments before et after

Les pseudo-éléments suivants pourront aussi être utiles à certain d'entre nous.

• :before : qui signifie "avant"
• :after : qui signifie "après"

Ces pseudo-éléments nous permettent d'éviter les répétitions. En cas de répétition de plusieurs textes ou d'image au début et à la fin d'un texte par exemple, on peut utiliser ces pseudo-éléments sans problème. Dans cet exemple d'interview, afin d'éviter de répéter le nom des participants chaque fois qu'ils prennent la parole, on met le nom dans le content d'un pseudo élément : before. Pour pimenter un peu la sauce, un petit coup de crayon de couleur et un léger réajustement de taille seront plus classes.

Code CSS :

.thomas:before
{


content: "Thomas Brown:";
text-decoration:underline;
font-size:2em;
color:green;
}



.valerie:before
{


content: "Valérie Cornel:";
text-decoration:underline;
font-size:2em;
color:red


}

L'attribut content permet de spécifier le contenu répété.

Code XHTML :

<p class="thomas">Comment vous-vivez votre vie de Star ? </p>
<p class="valerie">J'ai commencé à chanter depuis l'an 1998....</p>
<p class="thomas">N'y a-t-il pas un impact sur votre vie privée? </p>
<p class="valerie">C'est très difficile mais j'essaie de bien m'organiser....</p>

De la même manière on peut utiliser le pseudo élément after en cas de besoin. On peut même combiner les deux.