Guide complet : Les pseudo-éléments CSS (before et after)

Prérequis

• Niveau : bases CSS (sélecteurs, propriétés position, display).
• Outils : VS Code + Live Server, navigateur moderne.
• Temps estimé : 45 min.

Pourquoi ::before et ::after ?

Ces deux pseudo-éléments permettent d’ajouter du contenu purement décoratif sans toucher au HTML : badges, icônes, lignes, tooltips, overlays. Résultat : un HTML sémantique propre, et toute la mise en forme reste côté CSS.

Qu’est-ce qu’un pseudo-élément ?

Les pseudo-éléments ::before et ::after créent des éléments virtuels avant et après le contenu d’un élément HTML, sans toucher au HTML. Ils sont indispensables pour les décorations, les icônes et les effets visuels.

Syntaxe de base

/* Double deux-points :: (syntaxe moderne recommandée) */
.element::before {
    content: "★ ";    /* Texte ou rien */
    color: gold;
}

.element::after {
    content: " →";
    color: #667eea;
}

/* Résultat : ★ Mon texte → */

Cas pratique 1 : Badge « Nouveau » automatique

/* Ajouter "Nouveau" à côté de certains éléments */
.formation-nouvelle::after {
    content: "NOUVEAU";
    background: #e53935;
    color: white;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    margin-left: 10px;
    vertical-align: middle;
}

/* HTML : <h3 class="formation-nouvelle">Formation IA</h3>
   Résultat : Formation IA NOUVEAU */

Cas pratique 2 : Ligne décorative sous un titre

.titre-decore {
    position: relative;
    padding-bottom: 15px;
    text-align: center;
}

.titre-decore::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(to right, #667eea, #764ba2);
    border-radius: 2px;
}

Cas pratique 3 : Icônes sans bibliothèque

/* Ajouter des icônes Unicode avant les liens */
.lien-externe::before {
    content: "🔗 ";
}

.lien-pdf::before {
    content: "📄 ";
}

.lien-email::before {
    content: "✉️ ";
}

/* Avec compteur automatique */
.liste-numerotee {
    counter-reset: etape;
}

.liste-numerotee li::before {
    counter-increment: etape;
    content: counter(etape);
    background: #667eea;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-weight: bold;
    font-size: 14px;
}

Cas pratique 4 : Overlay sur une image au survol

.carte-projet {
    position: relative;
    overflow: hidden;
}

.carte-projet::after {
    content: "Voir le projet →";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(102, 126, 234, 0.85);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.carte-projet:hover::after {
    opacity: 1;
}

Cas pratique 5 : Guillemets stylisés pour les citations

blockquote {
    position: relative;
    padding: 30px 40px;
    font-style: italic;
    background: #f8f9fa;
    border-left: 4px solid #667eea;
}

blockquote::before {
    content: "\201C";  /* Guillemet ouvrant " */
    font-size: 60px;
    color: #667eea;
    position: absolute;
    top: -10px;
    left: 10px;
    font-family: Georgia, serif;
}

blockquote::after {
    content: "\201D";  /* Guillemet fermant " */
    font-size: 60px;
    color: #667eea;
    position: absolute;
    bottom: -30px;
    right: 10px;
    font-family: Georgia, serif;
}

Cas pratique 6 : Tooltip (info-bulle) en CSS pur

[data-tooltip] {
    position: relative;
    cursor: help;
    border-bottom: 1px dashed #999;
}

[data-tooltip]::after {
    content: attr(data-tooltip);  /* Lit l'attribut HTML ! */
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

[data-tooltip]:hover::after {
    opacity: 1;
}

/* HTML : <span data-tooltip="Cascading Style Sheets">CSS</span> */

Résumé

Erreurs fréquentes

Le pseudo-élément n’apparaît pas

Cause : oubli de content: "" (même vide, c’est obligatoire).
Solution : ajoutez content: "" systématiquement, sinon le navigateur n’instancie pas le pseudo-élément.

Position absolue qui ne marche pas

Cause : le parent n’est pas en position: relative (ou absolute/fixed).
Solution : assurez-vous que le parent a un positioning context non statique.

Pseudo-élément invisible sur <img> ou <input>

Cause : les éléments « void » (img, input, br, hr) n’acceptent pas de pseudo-éléments.
Solution : enveloppez l’élément dans un <span> ou <div> et appliquez le pseudo-élément dessus.

Identifiants/compteurs CSS accentués

Cause : counter-reset: étape; avec accent — valide CSS, mais source de bugs avec préprocesseurs/minificateurs.
Solution : ASCII partout (etape).

Exercice pratique

Cas d’usage avancés des pseudo-éléments en 2026

Au-delà des badges et puces décoratives, les pseudo-éléments CSS permettent des effets sophistiqués sans une ligne de JavaScript. Premier cas : compteurs CSS automatiques via counter-reset et counter-increment. Pour numéroter automatiquement des sections d’article, étapes d’un tutoriel ou items d’une liste personnalisée, c’est plus robuste que d’écrire les numéros à la main qui se désynchronisent quand on insère ou supprime des éléments.

article {
  counter-reset: section;
}
article h2::before {
  counter-increment: section;
  content: "Section " counter(section) " — ";
  color: var(--accent);
  font-weight: bold;
}

Deuxième cas : tooltips CSS pures via ::after sur un :hover. Pas besoin de bibliothèque tierce pour 90 % des besoins de tooltip. Troisième cas : icônes via SVG inline en arrière-plan du pseudo-élément, ce qui évite des requêtes HTTP supplémentaires et permet la coloration dynamique via currentColor.

Limitations à connaître

Les pseudo-éléments ne fonctionnent pas sur les éléments void (sans contenu) comme <img>, <input>, <br>, <hr>. Pour ajouter un effet décoratif autour d’une image, envelopper l’<img> dans un <span> ou <div> et appliquer le pseudo-élément sur le wrapper. Sur les inputs, c’est plus complexe car beaucoup d’inputs n’autorisent pas non plus les pseudo-éléments — préférer un wrapper avec icône en SVG.

Autre limitation : les pseudo-éléments ne sont pas accessibles aux lecteurs d’écran par défaut. Le contenu généré via content: "Lire la suite" n’est pas annoncé. C’est volontaire car les pseudo-éléments sont conçus comme purement décoratifs. Pour rendre le texte accessible, utiliser un vrai élément HTML ou ajouter un aria-label approprié sur l’élément parent.

Pseudo-éléments vs Web Components vs frameworks

En 2026, les pseudo-éléments restent l’outil le plus léger pour les effets décoratifs simples. Pour des composants complexes (boutons, cards, formulaires complets), les Web Components ou un framework (React, Vue) deviennent pertinents. Le piège classique est d’abuser des pseudo-éléments pour des structures qui devraient être de vrais éléments HTML, ce qui complique la maintenance et l’accessibilité.

Règle pratique : utiliser ::before/::after pour ajouter une décoration visuelle qui n’a pas de sens sémantique propre (badge, séparateur, icône). Pour tout contenu qui doit être lu, indexé ou interagi, créer un vrai élément HTML.

Pseudo-éléments dans les frameworks CSS modernes

Tailwind CSS expose les pseudo-éléments via les variantes before: et after: qui s’appliquent comme préfixes sur n’importe quelle classe utilitaire. Par exemple, before:content-["★"] before:text-yellow-500 génère le même résultat qu’un CSS classique mais reste cohérent avec le reste du projet Tailwind. Bootstrap 5 utilise les pseudo-éléments en interne pour ses classes .icon-link, .dropdown-toggle::after, et autres composants natifs — c’est l’une des raisons pour lesquelles Bootstrap reste léger malgré sa richesse fonctionnelle.

Cette intégration native dans les frameworks signifie que vous bénéficiez automatiquement des pseudo-éléments même si vous ne les écrivez jamais directement — d’où l’intérêt de comprendre leur fonctionnement pour debugger ou personnaliser un thème existant.

Adaptation au contexte ouest-africain

Pour un développeur ou une PME basée à Dakar, Abidjan, Bamako ou Cotonou qui livre des sites WordPress ou des applications web, les pseudo-éléments restent un excellent moyen d’enrichir visuellement un thème sans alourdir le bundle JavaScript ni dépendre d’icônes externes payantes. Quelques lignes de CSS bien placées remplacent une bibliothèque d’icônes Pro à 99 USD/an.

Concrètement, pour un site marchand, ajouter un badge « Nouveau » via ::before sur les produits récents évite de stocker des images badges. Pour un site d’agence, encadrer les titres de section avec des séparateurs CSS purs économise des requêtes images. Pour les notations en étoiles, utiliser ::before avec des Unicode (★ ☆) reste plus rapide que charger une bibliothèque d’étoiles SVG. Voir aussi le guide Bootstrap 5 responsive qui couvre la plupart de ces patterns décoratifs.

Animer les pseudo-éléments avec transitions et animations

Les pseudo-éléments acceptent toutes les propriétés CSS animables : transform, opacity, color, background, width, height. Cela permet de créer des effets décoratifs animés sans JavaScript. Premier pattern : un underline animé qui se révèle au survol via transform: scaleX() sur un ::after positionné en bas du lien.

a {
  position: relative;
  text-decoration: none;
}
a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 250ms ease-out;
}
a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

Deuxième pattern : badges avec apparition douce via opacity et transform: translateY(). Troisième pattern : éléments décoratifs animés en boucle avec @keyframes sur le pseudo-élément (cercle pulsant pour bouton CTA, gradient animé en arrière-plan). Toujours respecter prefers-reduced-motion via une media query qui désactive les animations pour les utilisateurs sensibles aux mouvements.

Quatre erreurs fréquentes à éviter

Première erreur : oublier la propriété content. Sans elle, le pseudo-élément n’apparaît pas, même si toutes les autres propriétés sont définies. content: "" avec une chaîne vide reste obligatoire pour les pseudo-éléments décoratifs sans texte. Deuxième erreur : positionnement absolu sans parent en position relative. Le pseudo-élément se positionne alors par rapport à la fenêtre, pas à son parent — résultat catastrophique au scroll.

Troisième erreur : utiliser un seul deux-points (:before au lieu de ::before). La syntaxe avec deux deux-points est la norme depuis CSS3, même si les navigateurs acceptent encore l’ancienne pour rétro-compatibilité. Adopter ::before et ::after systématiquement pour la lisibilité. Quatrième erreur : abuser des pseudo-éléments pour des éléments interactifs. Un bouton ne doit jamais être un pseudo-élément — il doit être un vrai <button> accessible au clavier et aux lecteurs d’écran.

Compatibilité navigateurs en 2026

Les pseudo-éléments ::before et ::after sont supportés par tous les navigateurs modernes depuis plus d’une décennie — Chrome, Firefox, Safari, Edge. En 2026, vous pouvez les utiliser sans aucun fallback ni préfixe vendeur. Internet Explorer 11 (qui n’est plus supporté par Microsoft depuis 2022) supportait également les pseudo-éléments avec quelques bizarreries — mais il n’y a plus de raison de cibler IE en 2026.

Quelques propriétés modernes utilisées avec les pseudo-éléments demandent un peu plus de prudence. Premier exemple : backdrop-filter pour les effets de flou, supporté nativement depuis 2022 sur tous les navigateurs majeurs mais absent sur certains anciens Android Chrome. Deuxième exemple : les conic-gradient et radial-gradient avancés, fonctionnels partout sauf sur des configurations très anciennes. Troisième exemple : aspect-ratio, supporté depuis 2021. Pour vérifier en temps réel le support d’une propriété CSS, l’outil de référence reste caniuse.com.

Tester ses pseudo-éléments dans les DevTools

Chrome DevTools, Firefox DevTools et Safari Web Inspector affichent les pseudo-éléments dans le panneau Elements. Cliquez sur l’élément parent dans l’arbre DOM, puis dépliez-le pour voir les pseudo-éléments générés. Vous pouvez modifier leurs styles en direct, basculer leur visibilité avec la checkbox, et inspecter leur position via les outils de layout (overlay grid, flexbox visualizer).

Astuce productivité : Firefox a un excellent inspecteur de pseudo-éléments avec un raccourci pour les forcer en état :hover, :active ou :focus. Utile pour debugger un effet d’animation au survol sans avoir à maintenir la souris en position. Chrome a la même fonctionnalité dans le panneau « Force element state » — pratique pour itérer rapidement sur des transitions complexes.

Pour les équipes qui produisent des sites WordPress en série, créer une bibliothèque de patterns de pseudo-éléments réutilisables (mixins SASS ou classes utilitaires Tailwind custom) accélère la livraison et garantit une cohérence visuelle entre projets.

Pour étoffer le tableau

• Animations CSS
• Variables CSS
• Référence : MDN — ::before et ::after
• Compteurs CSS : MDN — Compteurs CSS
• Inspiration : CSS-Tricks — ::before / ::after