Name: Apprend et maîtrise le CSS
Author: Mpia M.

Les pseudo-éléments permettent de styliser une partie d'un élément ou d'injecter du contenu décoratif sans modifier le HTML.

Pseudo-éléments courants :

::before
::after
::first-line
::first-letter
::selection
::marker

Exemple

.badge::before {
  content: "Nouveau";
  margin-right: 0.5rem;
  color: #0ea5e9;
  font-weight: 700;
}

p::first-letter {
  font-size: 2rem;
  font-weight: 700;
}

Bonnes pratiques

utilise les pseudo-éléments pour la décoration, pas pour l'information critique
n'abuse pas de content pour des textes importants
préfère un vrai élément HTML si le contenu a du sens métier

Accessibilité

Le contenu généré par content peut être mal interprété par certains outils d'assistance. Pour les informations essentielles, écris le texte dans le HTML.

A retenir

Les pseudo-éléments sont puissants pour les finitions visuelles. Ils complètent un composant propre, mais ne doivent pas remplacer une structure HTML sémantique.

Mini pratique

Crée une liste et personnalise les puces avec ::marker. Ajoute ensuite un ruban décoratif avec ::before sur une carte produit.

Erreurs fréquentes

appliquer des valeurs sans vérifier l'impact sur mobile
surcharger la feuille de style au lieu de simplifier les sélecteurs
corriger un symptôme visuel sans comprendre la cause (cascade, flux ou dimensions)

Checklist rapide

la règle est-elle lisible et cohérente avec le reste du module ?
le rendu reste-t-il correct sur petit écran ?
la solution est-elle maintenable sans !important ?

Mini défi

Reprends l'exemple de cette leçon, retire une règle inutile, et conserve exactement le même rendu visuel.

Pseudo-éléments