::before et ::after

1. À quoi servent ::before et ::after ?

Ce sont des pseudo-éléments permettant d’ajouter du contenu virtuel avant ou après un élément HTML, sans modifier le code HTML lui-même.

• Ajouter des icônes
• Créer des décorations
• Insérer du texte automatique
• Créer des effets visuels
• Fabriquer des formes (triangles, badges…)

Ils nécessitent toujours la propriété :

content: "";

2. Exemple simple : ajouter du texte avant et après

CSS :

p::before {
    content: "→ ";
}

p::after {
    content: " ✔";
}

HTML :

<p>Bonjour Louis</p>

3. Exemple : ajouter une icône Unicode

CSS :

li::before {
    content: "• ";
    color: red;
}

HTML :

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

4. Exemple : créer un badge (pastille de notification)

CSS :

.notification::after {
    content: "3";
    background: red;
    color: white;
    padding: 2px 6px;
    border-radius: 50%;
    margin-left: 8px;
}

HTML :

<span class="notification">Messages</span>

5. Exemple : créer une flèche (triangle CSS)

CSS :

.button::after {
    content: "";
    border-left: 8px solid black;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    margin-left: 6px;
}

HTML :

<button class="button">Continuer</button>

6. Exemple : surlignage décoratif

CSS :

h2 {
    position: relative;
}

h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 6px;
    background: yellow;
    z-index: -1;
}

HTML :

<h2>Titre important</h2>

7. Exemple : ajouter automatiquement un astérisque aux champs obligatoires

CSS :

input[required]::after {
    content: " *";
    color: red;
}

HTML :

<label>Email >input type="email" required></label>

8. Exemple : tooltip simple (info-bulle)

CSS :

.info::after {
    content: attr(data-tooltip);
    position: absolute;
    background: black;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    opacity: 0;
    transition: 0.3s;
    transform: translateY(-10px);
}

.info:hover::after {
    opacity: 1;
    transform: translateY(-20px);
}

HTML :

<span class="info" data-tooltip="Ceci est une info-bulle">Survole-moi</span>

9. Limites importantes

• Impossible d’ajouter du vrai HTML (pas de <div>, <img>, etc.)
• Ils ne sont pas dans le DOM
• Ils nécessitent toujours content:
• Ils fonctionnent mieux avec des éléments en block ou inline-block

10. Résumé