Chargement...

Pseudo-éléments CSS

Les pseudo-classes changent l’apparence quand un état change (:hover, :focus). Les pseudo-éléments vont plus loin : vous pouvez styler une partie du texte, ou créer une petite boîte avant ou après le contenu réel — avec un double deux-points (::) et sans balises en plus dans le HTML.

Que signifie pseudo-élément ?

Un pseudo-élément est un mot collé au sélecteur avec ::. Il cible quelque chose qui n’est pas un élément complet dans le markup : la première lettre, la première ligne, ou une boîte générée avant/après le contenu. Pour ::before et ::after, il faut souvent content pour voir quelque chose.

Quatre pseudo-éléments courants

Commencez par ceux-ci. L’ancienne forme à un seul deux-points (:before) marche encore souvent — écrivez quand même la forme moderne en double.

📊 Pseudo-éléments CSS du quotidien

Pseudo-élément Ce qu’il stylise Exemple
::before Boîte avant le contenu de l’élément p::before
::after Boîte après le contenu de l’élément a::after
::first-letter Première lettre d’un bloc de texte p::first-letter
::first-line Première ligne d’un bloc de texte p::first-line

Avant le contenu — ::before et content

::before crée une boîte virtuelle avant le texte réel. Vous mettez presque toujours content — une chaîne, ou "" pour une boîte vide décorative.

Avant — guillemet ouvrant

css
CSS Code 
.quote::before {
content: "“";
color: #0f766e;
font-size: 1.5rem;
margin-right: 0.25rem;
}

N’oubliez pas content

Sans content, beaucoup de règles ::before/::after n’affichent rien. Pour une barre de couleur ou une icône en fond, content: "" suffit.

Après le contenu — ::after

::after est la même idée après le contenu — pour une unité, un badge ou un petit suffixe.

Après — indice de lien externe

css
CSS Code 
a.external::after {
content: " ↗";
font-size: 0.85em;
}

Ne cachez pas le sens nécessaire ici

Les lecteurs d’écran et certains outils traitent le contenu généré de façon inégale. Ne mettez pas les consignes importantes seulement dans ::before/::after ; gardez le texte réel dans le HTML.

Première lettre — ::first-letter

::first-letter stylise la première lettre d’un bloc de texte — le classique caractère d’ouverture agrandi.

Première lettre — caractère d’ouverture plus grand

css
CSS Code 
.lead::first-letter {
font-size: 2.5rem;
font-weight: 700;
color: #0f766e;
float: left;
line-height: 1;
margin-right: 0.15em;
}

Première ligne — ::first-line

::first-line stylise seulement la première ligne visible — pas « la première phrase », mais la ligne que le navigateur forme en coupant le texte.

Première ligne — un peu plus forte

css
CSS Code 
.lead::first-line {
font-weight: 600;
color: #334155;
}

Boîte vide décorative

Parfois vous voulez seulement une bande de couleur sans texte. content: "" suffit.

before vide — bande décorative

css
CSS Code 
.card::before {
content: "";
display: block;
height: 4px;
background: #0f766e;
margin-bottom: 0.75rem;
}

Bonnes habitudes

  • Pseudo-élément = double deux-points (::before) ; pseudo-classe = simple (:hover)
  • Mettez content sur ::before/::after si quelque chose doit être visible
  • Gardez le texte essentiel dans le HTML, pas seulement dans le contenu généré
  • ::first-letter et ::first-line agissent sur des blocs de texte
  • Préférez :: moderne même si l’ancien :before marche encore

Essayez vous-même

  1. Page courte avec paragraphe .quote, paragraphe .lead, lien a.external et .card avec du texte.
  2. Ajoutez .quote::before { content: "“"; color: #0f766e; } et voyez le guillemet.
  3. Sur le lien class external : a.external::after { content: " ↗"; }.
  4. Agrandissez .lead::first-letter en teal ; stylisez .lead::first-line avec font-weight: 600.
  5. Ajoutez .card::before { content: ""; display: block; height: 4px; background: #0f766e; } pour la barre du haut.

Erreurs fréquentes

  • Écrire :before alors que vous vouliez un état comme :hover — état un deux-points ; boîte générée deux
  • Oublier content et ne rien voir apparaître
  • Mettre la seule copie d’un avertissement seulement dans ::after
  • Attendre un miracle de ::first-letter sur un élément vide ou image seule
  • Confondre ::first-line avec « première phrase » — le retour à la ligne du navigateur décide

Résumé

  • Les pseudo-éléments avec :: stylisent une partie ou une boîte générée
  • ::before/::after ont besoin de content (chaîne ou "")
  • ::first-letter et ::first-line prennent le début du bloc de texte
  • Le sens critique reste dans le HTML
  • Un deux-points = pseudo-classe ; doubles = pseudo-élément
  • Entraînez-vous avec guillemet, suffixe de lien et paragraphe lead

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
8
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 1 de 1
Css Tutoriel