CSS Pseudo-éléments
Pseudo-éléments CSS
Un pseudo-élément CSS est un mot-clé qui peut être ajouté à un sélecteur pour styliser une partie spécifique d'un élément.
Voici quelques utilisations courantes des pseudo-éléments :
- Styliser la première lettre ou la première ligne d'un élément
- Insérer du contenu avant ou après un élément
- Styliser les marqueurs des éléments de liste
- Styliser la portion sélectionnée par l'utilisateur d'un élément
- Styliser la zone de visualisation derrière une boîte de dialogue
Syntaxe
Les pseudo-éléments sont désignés par un double deux-points (::) suivi du nom du pseudo-élément :
sélecteur::nom-du-pseudo-élément {
Propriétés CSS
} Le pseudo-élément CSS ::first-line
Le ::first-line pseudo-élément est utilisé pour ajouter un style spécial à la première ligne d'un texte.
Remarque : Le ::first-line pseudo-élément ne peut être appliqué qu'aux éléments de niveau bloc.
Exemple
Formater la première ligne de texte dans tous les éléments <p> :
p::first-line {
color: red;
font-variant: small-caps;
font-size: 19px;
} Le pseudo-élément CSS ::first-letter
Le ::first-letter pseudo-élément est utilisé pour ajouter un style spécial à la première lettre d'un texte.
Remarque : Le ::first-letter pseudo-élément ne peut être appliqué qu'aux éléments de niveau bloc.
Exemple
Formater la première lettre du texte dans tous les éléments <p> :
p::first-letter {
color: red;
font-size: xx-large;
} Le pseudo-élément CSS ::before
Le ::before pseudo-élément est utilisé pour insérer du contenu avant le contenu d'un élément spécifié.
Utilisez la propriété content pour spécifier le contenu à insérer.
Exemple
Insérer une image avant le contenu de chaque élément <h3> :
h3::before {
content: url(smiley.gif);
} Le pseudo-élément CSS ::after
Le ::after pseudo-élément est utilisé pour insérer du contenu après le contenu d'un élément spécifié.
Utilisez la propriété content pour spécifier le contenu à insérer.
Exemple
Insérer une image après le contenu de chaque élément <h3> :
h3::after {
content: url(smiley.gif);
} Le pseudo-élément CSS ::marker
Le ::marker pseudo-élément est utilisé pour styliser les marqueurs des éléments de liste.
Exemple
Styliser les marqueurs des éléments de liste :
::marker {
color: red;
font-size: 23px;
} Le pseudo-élément CSS ::selection
Le ::selection pseudo-élément est utilisé pour styliser la partie d'un texte qui est sélectionnée par un utilisateur.
Exemple
Styliser le texte sélectionné par l'utilisateur avec une couleur rouge et un fond jaune :
::selection {
color: red;
background: yellow;
} Le pseudo-élément CSS ::backdrop
Le ::backdrop pseudo-élément est utilisé pour styliser la zone de visualisation derrière une boîte de dialogue ou un élément popover.
Exemple
Styliser la zone de visualisation derrière une boîte de dialogue :
dialog::backdrop {
background-color: lightgreen;
} Pseudo-éléments et classes HTML
Les pseudo-éléments peuvent facilement être combinés avec des classes HTML.
Exemple
Afficher la première lettre des éléments <p> ayant la classe "intro", en rouge et dans une taille plus grande :
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
} Multiples pseudo-éléments
Plusieurs pseudo-éléments peuvent également être combinés.
Dans l'exemple suivant, la première lettre des éléments <p> sera rouge et dans une taille de police xx-large. Le reste de la première ligne sera bleu et en petites majuscules. Le reste du paragraphe sera dans la taille et la couleur de police par défaut :
Exemple
p::first-letter {
color: red;
font-size: xx-large;
}
p::first-line {
color: blue;
font-variant: small-caps;
} Référence des pseudo-éléments CSS
Pour une liste complète de tous les pseudo-éléments CSS, visitez notre Référence des pseudo-éléments CSS .