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.

📌 Règle fondamentale

Un pseudo-élément nécessite obligatoirement la propriété content, même si elle est vide : content: "";. Sans elle, il n’apparaîtra pas.

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> */

⚠️ Pièges à éviter

::before et ::after ne fonctionnent PAS sur <img>, <input> et <br> (éléments vides)
Le contenu généré n’est PAS sélectionnable par l’utilisateur et n’apparaît pas dans le copier-coller
Ne mettez pas de contenu important dans les pseudo-éléments (invisible pour les lecteurs d’écran sauf avec role)
Un seul ::before et un seul ::after par élément

Résumé

Propriété	Valeurs possibles
`content`	`""`, `"texte"`, `attr(data-x)`, `counter(n)`, `url(image.png)`
`position`	Souvent `absolute` (avec parent en `relative`)
`display`	Par défaut `inline`, souvent changé en `block` ou `flex`

Exercice pratique

🎯 Défi : Carte de prix avec ruban « Populaire »

Créez 3 cartes de prix (Basique, Pro, Premium)
Ajoutez un ruban diagonal « POPULAIRE » en CSS pur sur la carte Pro avec ::before
Ajoutez une ligne décorative sous chaque titre avec ::after
Ajoutez des tooltips CSS sur les fonctionnalités

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