Contenu ::before et ::after
Insérez du contenu généré avant ou après des éléments avec ::before et ::after et la propriété content.
Contenu ::before et ::after est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Que sont les pseudo-éléments ?
Les pseudo-éléments créent des éléments virtuels qui sont stylisés comme s’ils faisaient partie du DOM. Ils utilisent deux deux-points ::. Les plus utilisés sont ::before et ::after.
::before et ::after
::before insère du contenu généré avant le contenu d’un élément. ::after l’insère après. Les deux nécessitent la propriété content pour être affichés.
<span class="element">Text with generated content</span>La propriété content
La propriété content accepte les valeurs suivantes :
- Une chaîne de caractères :
content: "text" - Une chaîne vide :
content: ""(courante pour les formes décoratives) - Une URL :
content: url("icon.svg") - Un compteur :
content: counter(step) - attr() :
content: attr(data-tooltip)
Guillemets décoratifs
Ajoutez des guillemets typographiques sans les ajouter au HTML :
<blockquote>Design is not just what it looks like — design is how it works.</blockquote>Formes avec une propriété content vide
La définition de content: "" avec une position et des dimensions permet de créer des formes décoratives sans HTML supplémentaire :
<div class="card" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;margin-top:12px;">Card with a colored top bar drawn by ::before</div>Correction des flottants avec ::after
La correction classique des flottants utilise ::after pour neutraliser les flottants sans balisage supplémentaire :
<div class="clearfix" style="border:1px solid #ccc;">
<div style="float:left;width:50%;background:#4f8cff22;padding:8px;">Floated column</div>
</div>Info-bulle avec ::after
Info-bulle uniquement en CSS utilisant ::after et attr() :
<span data-tooltip="Helpful hint" style="position:relative;display:inline-block;margin-top:24px;">Hover target</span>Icône avec content: url()
Insérez une petite icône avant les liens avec content: url() :
<a href="https://example.com" target="_blank" rel="noopener">External link</a>Limites des pseudo-éléments
Les pseudo-éléments ne font pas partie du DOM. Ils sont :
- impossibles à sélectionner ou à rechercher pour les utilisateurs
- inaccessibles par défaut aux lecteurs d’écran
- impossibles à cibler avec JavaScript
Ne placez jamais de contenu essentiel dans le contenu généré : utilisez les pseudo-éléments uniquement à des fins décoratives.
Deux-points simple ou double
Le deux-points simple (:before) était la syntaxe de CSS2. Le double deux-points (::before) est la norme CSS3 qui distingue les pseudo-éléments des pseudo-classes. Les deux fonctionnent dans les navigateurs modernes, mais utilisez le double deux-points pour le nouveau code.
Quels éléments prennent en charge ::before/::after
Les éléments remplacés (img, input, select, video) ne peuvent pas avoir de pseudo-éléments, car ils ne possèdent aucune zone de contenu dans laquelle les insérer. Utilisez plutôt un élément conteneur pour la décoration.
Vérification rapide
Quelle valeur de content est nécessaire pour un pseudo-élément décoratif ::before sans texte visible ?
Récapitulatif
::before et ::after insèrent du contenu généré autour du contenu réel d’un élément. La propriété content est obligatoire. Utilisez-les pour créer des formes décoratives, des icônes, des guillemets et des info-bulles, mais jamais pour du contenu important auquel les utilisateurs doivent accéder ou qu’ils doivent lire.
Questions Fréquemment Posées
La leçon « Contenu ::before et ::after » est-elle gratuite ?
Oui — le texte complet de « Contenu ::before et ::after » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Contenu ::before et ::after » ?
Insérez du contenu généré avant ou après des éléments avec ::before et ::after et la propriété content. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Contenu ::before et ::after » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Contenu ::before et ::after
- ::placeholder ::selection et ::marker
- Compteurs CSS avec ::before
- Motifs décoratifs avec des pseudo-éléments