Pseudo-éléments en CSS

Pseudo-éléments.

Ces sélecteurs font référence à des éléments qui ne sont pas forcément délimités par des balises HTML. Par exemple le pseudo élément ::first-letter désigne la première lettre du texte d'un élément, bien qu'aucune balise HTML ne délimite cette première lettre.

Ne confondez pas pseudo-éléments et pseudo-classes. La distinction est la suivante :

• Les pseudo classes désignent un état de l'élément, par exemple un lien qui a déjà été visité, un élément survolé par la souris, etc.
• Les pseudo éléments désignent une partie d'un élément. Par exemple ::first-line désigne la première ligne de texte de l'élément.

Les noms des pseudo-éléments commencent par un double deux points ( :: ).

Remarque ! Les navigateurs reconnaissent généralement le simple deux points aussi bien pour les pseudo-classes que pour les pseudo-éléments. C'est dû au fait que les précédentes versions de CSS ne distinguaient pas pseudo-classes et pseudo-éléments.

Utilisés seuls, les pseudo-éléments s'appliquent à toutes les balises mais il est facile de les combiner avec un sélecteur classique pour en limiter la portée :

    ::first-letter   désigne la première lettre de tous les éléments qui contiennent du texte.
    h1::first-letter   désigne la première lettre des titres h1.

Liste des pseudo-éléments.

• ::before {...} ::after {...}

  Désigne l'emplacement situé avant et après l'élément.
  Ces deux pseudo-éléments sont souvent utilisés avec la propriété content.

   Le symbole '⇛' a été ajouté au début de cet élément, en rouge.
  Tandis que '⇚' a été ajouté après, en rouge également. 

• ::first-letter {...}

  Désigne la première lettre d'un texte. Pratique pour formater des lettrines.

  La première lettre de ce paragraphe est en rouge et en gras.

  Plus d'informations et d'exemples sur le pseudo-élément ::first-letter.

• ::first-line {...}

  Désigne la première ligne de texte.

  La première ligne de ce paragraphe est en rouge mais les lignes suivantes restent dans la couleur par défaut. En réduisant la largeur de la fenêtre du navigateur vous constaterez que le pseudo élément ::first-line est dynamique.

• ::marker {...}

  Désigne les marqueurs dans une liste à puces ou une liste numérotée. ::marker désigne la puce ou le numéro lui-même.

  1. Printemps
  2. Été
  3. Automne
  4. Hiver

  • Printemps
  • Été
  • Automne
  • Hiver

  Voir d'autres exemples avec le pseudo-élément ::marker.

• ::placeholder {...}

  Désigne le texte d'aide affiché avant la saisie.

  Date :  - Code postal : 

  Plus d'exemples sur le pseudo-élément ::placeholder.

• ::selection {...} ::inactive-selection {...}

  Désigne le texte, ou un élément quelconque, sélectionné.
  ::selection s'applique lorsque la fenêtre qui contient la sélection est active, tandis que ::inactive-selection s'applique lorsque la fenêtre est inactive (au second plan).

  Sélectionnez une partie de ce texte pour voir s'appliquer les attributs. Basculez sur une autre fenêtre pour constater le changement de couleur (si votre navigateur traite ces deux pseudo-éléments).

• ::spelling-error {...} ::grammar-error {...}

  Ces pseudo-éléments désignent les mots ou textes qui comportent des fautes d'orthographe (spelling) ou de grammaire (grammar). A l'heure actuelle (2019) aucun navigateur ne traite ces sélecteurs.

  Il faut noter également que cette fonctionnalité peut être désactivée avec l'attribut HTML spellcheck="false"

  Ce texte contient des fotes d'ortografe. Si votre navigateur traite le sélecteur ::spelling-error, les mots erronés s'affichent soulignés en rouge.

  Cette phrase contiennent plusieurs faute d'accord.
  Lorsque les navigateurs traiteront le sélecteur grammar-error, elle apparaîtra soulignée en rouge.