CSS Pseudo-éléments

Les pseudo-éléments CSS sont un type spécial de sélecteur qui peut mettre en forme des parties spécifiques des éléments d'une page sans modifier la structure HTML.

Les pseudo-éléments CSS sont utilisés pour ajouter des effets spéciaux à certains sélecteurs.

Les pseudo-éléments CSS courants incluent ::before, ::after, ::first-line, ::first-letter, etc.

Syntaxe

Syntaxe des pseudo-éléments :

selector::pseudo-element {
    property: value;
}

Les classes CSS peuvent également utiliser des pseudo-éléments :

selector.class::pseudo-element {
    property: value;
}

Pseudo-élément :first-line

Le pseudo-élément "first-line" est utilisé pour appliquer une mise en forme spéciale à la première ligne de texte.

Dans l'exemple suivant, le navigateur mettra en forme la première ligne de texte dans un élément p selon les styles du pseudo-élément "first-line" :

Exemple

p:first-line { color:#ff0000; font-variant:small-caps; }

Essayez-le vous-même »

Remarque :Le pseudo-élément "first-line" ne peut être utilisé qu'avec des éléments de niveau bloc.

Remarque :Les propriétés suivantes peuvent être appliquées au pseudo-élément "first-line" :

  • propriétés de police
  • propriétés de couleur 
  • propriétés d'arrière-plan
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

:first-letter Pseudo-élément

Le pseudo-élément "first-letter" est utilisé pour appliquer un style spécial à la première lettre du texte :

Exemple

p:first-letter { color:#ff0000; font-size:xx-large; }

Essayez-le vous-même »

Remarque :Le pseudo-élément "first-letter" ne peut être utilisé qu'avec des éléments de niveau bloc.

Remarque :Les propriétés suivantes peuvent être appliquées au pseudo-élément "first-letter" :

  • propriétés de police
  • propriétés de couleur 
  • propriétés d'arrière-plan
  • propriétés margin
  • propriétés padding
  • propriétés border
  • text-decoration
  • vertical-align (uniquement si "float" est "none")
  • text-transform
  • line-height
  • float
  • clear

Pseudo-éléments et classes CSS

Les pseudo-éléments peuvent être combinés avec des classes CSS :

p.article:first-letter {color:#FF0000;}

<p class="article">文章段落</p>

L'exemple ci-dessus mettra en rouge la première lettre de tous les paragraphes avec la classe "article".

Pseudo-éléments multiples

Plusieurs pseudo-éléments peuvent être utilisés ensemble.

Dans l'exemple suivant, la première lettre d'un paragraphe sera affichée en rouge, avec une taille de police xx-large. Le reste du texte de la première ligne sera bleu et affiché en petites capitales.

Le reste du texte dans le paragraphe sera affiché avec la taille de police par défaut et

Exemple

p:first-letter { color:#ff0000; font-size:xx-large⟧:; } p:first-line { color:#0000ff; font-variant:small-caps; }

Essayez-le vous-même »

CSS - Pseudo-élément :before

Le pseudo-élément ":before" peut insérer un nouveau contenu avant le contenu d'un élément.

L'exemple suivant insère une image avant chaque élément <h1> :

Exemple

h1:before { content:url(smiley.gif); }

Essayez-le vous-même »

CSS - Pseudo-élément :after

Le pseudo-élément ":after" peut insérer une image après le contenu d'un élément.

L'exemple suivant insère une image après chaque élément <h1> :

Exemple

h1:after { content:url(smiley.gif); }

Essayez-le vous-même »

Toutes les pseudo-classes/éléments CSS

Sélecteur Exemple Description de l'exemple
:link a:link Sélectionne tous les liens non visités
:visited a:visited Sélectionne tous les liens visités
:active a:active Sélectionne le lien actif
:hover a:hover L'état lorsque la souris survole un lien
:focus input:focus Sélectionne un élément qui a le focus après une saisie
:first-letter p:first-letter Sélectionnez la première lettre de chaque élément <p>.
:first-line p:first-line Sélectionne la première ligne de chaque élément <p>
:first-child p:first-child Le sélecteur correspond aux éléments <p> qui sont le premier enfant de n'importe quel élément.
:before p:before Insère du contenu avant chaque élément <p>
:after p:after Insère du contenu après chaque élément <p>
:lang(language) p:lang(it) Sélectionnez une valeur de départ pour l'attribut lang de l'élément <p>.
autres extensions