Motifs décoratifs avec des pseudo-éléments
Créez des formes, séparateurs et superpositions décoratifs avec ::before et ::after, sans HTML supplémentaire.
Motifs décoratifs avec des pseudo-éléments est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.
Philosophie de la décoration en CSS pur
Les pseudo-éléments permettent de créer de nombreux effets décoratifs sans HTML supplémentaire. L’objectif est de n’utiliser aucun élément div pour la décoration : tous les embellissements visuels doivent être définis en CSS.
Triangle en CSS
Créez des triangles avec des éléments de taille nulle et des bordures transparentes :
<div class="triangle"></div>Flèche d’info-bulle
Une flèche d’info-bulle utilisant ::before :
<div class="tooltip" style="position:relative;display:inline-block;background:#333;color:#fff;padding:6px 12px;border-radius:4px;margin-top:16px;">Tooltip text</div>Séparateur de section diagonal
Une séparation de section inclinée utilisant skew ou clip-path sur ::after :
<div class="section" style="background:linear-gradient(135deg,#4f8cff,#7ee787);height:120px;position:relative;"></div>Soulignements décoratifs
Des effets de soulignement animés utilisant ::after :
<a href="#">Hover me (underline animates in on :hover)</a>Badge avec ::after
Un badge de notification superposé sans éléments HTML supplémentaires :
<span class="nav-icon" data-count="3" style="position:relative;display:inline-block;font-size:1.5rem;margin:16px;">🔔</span>Superposition en dégradé sur des images
Une superposition en dégradé sombre sur les images pour améliorer la lisibilité du texte :
<div class="card-image" style="width:100%;height:160px;background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>Coche avec ::before
Une coche personnalisée pour case à cocher, dessinée avec des bordures CSS :
<div class="custom-check" style="width:20px;height:20px;background:#34c759;border-radius:4px;padding:2px;"></div>Bannière en ruban
Un effet de ruban sur des cartes utilisant ::before avec un positionnement négatif :
<div class="card featured" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;width:200px;">Featured product</div>Effet de scintillement du chargement
Un effet de scintillement de chargement de squelette en CSS, sans JavaScript :
<div class="skeleton" style="width:100%;height:60px;border-radius:6px;"></div>Vérification rapide
Quelle combinaison de propriétés crée un triangle orienté vers le haut en CSS pur ?
Récapitulatif
Les pseudo-éléments permettent de créer de nombreux motifs décoratifs sans HTML supplémentaire : flèches, superpositions, soulignements animés, badges, rubans et effets de scintillement. Tous reposent sur content: "" + position: absolute + une utilisation créative des bordures, de clip-path et des transformations.
Questions Fréquemment Posées
La leçon « Motifs décoratifs avec des pseudo-éléments » est-elle gratuite ?
Oui — le texte complet de « Motifs décoratifs avec des pseudo-éléments » 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 « Motifs décoratifs avec des pseudo-éléments » ?
Créez des formes, séparateurs et superpositions décoratifs avec ::before et ::after, sans HTML supplémentaire. 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 4 sur 4.
Combien de temps prend la leçon « Motifs décoratifs avec des pseudo-éléments » ?
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