TechWeb
Accueil Codage HTML CSS DESIGN XML LaboCSS

Les pseudo-éléments

:first-line

Le peudo-élément :first-line permet d'identifier la première ligne d'un élément dans le flux normal. Ainsi les éléments en position flottante ou absolue ne sont pas concernés. En appliquant la règle suivante :

p.special:first-line

{
font-size : 18px; color : red;
}

Soit un paragraphe doté de l'attribut class="spécial", dont le contenu est suffisamment long pour s'étaler sur plusieurs lignes; un tel pargraphe verra sa première ligne mise en valeur si on affecte une propriété spécifique au pseudo-élément p:first-line. Par exemple p:first-line {font-size : 18px ; color : red}

En faisant varier la largeur de la fenêtre on constate que la première ligne dont la longueur change reste parfaitement définie. Le pseudo-élément :first-line est semblable à un élément, sinon qu'il n'est pas défini statiquement par la structure du document mais dynamiquement au cours de l'affichage.

:first-letter

Le pseudo-élément :first-letter identifie le premier caractère d'un élément permettant d'en réaliser un rendu spécifique.

La première lettre d'un élément peut être rendue différement comme dans cet extrait de texte

Le paragraphe ci-dessus de classe "spécial1", est obtenu en appliquant la règle suivante :

p.special1:first-letter

{
font-size :48px; color:blue;
}

les pseudo-éléments :first-line et :first-letter peuvent agir de concert.

p.special2:first-line

{
color:green;
}

p.special2:first-letter

{
font-size :48px; color:blue;
}

La première lettre ainsi que la première ligne d'un élément peuvent être rendues différement comme dans ce paragraphe de classe "spécial2" fabriqué de toute piúce pour les besoins de la démonstration

Si on applique la propriété float:left au pseudo-élément :first-letter on obtient un effet de lettrine courant en typographie. La rúgle suivante :

p.special3:first-letter

{
font-size :4em; color:#999999;
float:left;background-color:#000000;
}

présentera un titre de niveau h6 contenu dans une citation comme ci-dessous.

En appliquant la propriété float au pseudo-élément :first-letter on peut obtenir un effet de lettrine courant en typographie.

Non seulement la première lettre d'un élément peut être rendue différement comme dans l'extrait de texte précédent, mais en appliquant la prropriété float:left au pseudo élément first:letter on peut obtenir un effet de lettrine courant en typographie. Tout ça pour faire joli, et rajouter significativement du texte grâce à cette petite disgression.

Les pseudos-éléments :before et :after

Les pseudos-éléments :before et :after permettent l'insertion automatique de texte en début ou fin d'élément.

C'est la propriété content qui détermine le texte à afficher avant ou après l'élément.

Insertion de texte

soit le code suivant :

<p class="numero">5</p>

et la règle :

p.numero:before

{
content : "numero : ";
}

Produit le résultat suivant :

5

Insertion d'une image

p:before

{
content : url(image.gif);
}

Insertion de la valeur d'un attribut

:before

{
content : attr(style);
}
Valid XHTML 1.0 Strict Valid CSS!

Copyright Gabriel Braun 2007