Pseudo-éléments

Les pseudo-éléments sont utilisés pour cibler une partie d’un élément.

Par exemple, les pseudo-éléments sont utilisés pour styliser la première lettre ou la première ligne d’un élément paragraphe, ou encore pour insérer du contenu avant ou après un autre contenu.

Syntaxe

Voici la syntaxe d’un pseudo-élément :

selecteur::pseudo-element {
    propriete: valeur;
}

Le pseudo-élément ::first-line

Ce pseudo-élément est utilisé pour styliser la première ligne d’un paragraphe.

Remarque : ::first-line ne s’applique qu’à des éléments de type block.

Les propriétés suivantes s’utilisent avec ce pseudo-élément :

• font properties
• color properties
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

Exemple :

p::first-line {
    text-transform: uppercase; /* La première ligne des paragraphes est mise en majuscules */
}

Le pseudo-élément ::first-letter