Pseudo éléments CSS

Apprenez les bases des pseudo éléments CSS

Les pseudo-éléments sont utilisés pour styliser une partie spécifique d'un élément.

Ils commencent par un double deux-points::.

Parfois, vous les repérez dans la nature avec un seul deux-points, mais ce n'est qu'une syntaxe prise en charge pour des raisons de compatibilité descendante. Vous devez utiliser 2 deux points pour les distinguer des pseudo-classes.

::beforeet::aftersont probablement les pseudo-éléments les plus utilisés. Ils permettent d'ajouter du contenu avant ou après un élément, comme des icônes par exemple.

Voici la liste des pseudo-éléments:

Pseudo-élément Cibles
::after crée un pseudo-élément après l'élément
::before crée un pseudo-élément avant l'élément
::first-letter peut être utilisé pour styliser la première lettre d'un bloc de texte
::first-line peut être utilisé pour styliser la première ligne d'un bloc de texte
::selection cible le texte sélectionné par l'utilisateur

Faisons un exemple. Supposons que vous souhaitiez agrandir légèrement la première ligne d'un paragraphe en taille de police, chose courante en typographie:

p::first-line {
  font-size: 2rem;
}

Ou peut-être voulez-vous que la première lettre soit plus audacieuse:

p::first-letter {
  font-weight: bolder;
}

::afteret::beforesont un peu moins intuitifs. Je me souviens de les utiliser lorsque j'ai dû ajouter des icônes en utilisant CSS.

Vous spécifiez lecontentpropriété pour insérer tout type de contenu après ou avant un élément:

p::before {
  content: url(/myimage.png);
}

.myElement::before { content: “Hey Hey!”; }

Téléchargez mon gratuitManuel CSS


Plus de didacticiels CSS: