Compteurs CSS avec ::before
Créez des systèmes de numérotation automatique avec les compteurs CSS et la fonction counter().
Compteurs CSS avec ::before est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 3 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 compteurs CSS ?
Les compteurs CSS sont des variables gérées par CSS, dont les valeurs peuvent être incrémentées et affichées dans du contenu généré. Ils permettent une numérotation automatique sans JavaScript ni gestion manuelle des numéros en HTML.
counter-reset
counter-reset initialise ou réinitialise un compteur. Placez-le sur l’élément qui contient les éléments à compter.
<ul class="list">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>counter-increment
counter-increment augmente le compteur de 1 (par défaut) chaque fois qu’il est appliqué. Placez-le sur les éléments répétés.
<ul class="list">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>Fonction counter() dans content
Affichez la valeur actuelle du compteur avec counter(name) dans la propriété content d’un pseudo-élément.
<ul class="list">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>Compteur d’étapes mis en forme
Un composant complet d’étapes numérotées sans JavaScript :
<div class="steps">
<div class="step">Create an account</div>
<div class="step">Verify your email</div>
<div class="step">Start your first project</div>
</div>Valeur initiale du compteur
Définissez un numéro de départ personnalisé dans counter-reset :
<ul class="list">
<li>Item one</li>
<li>Item two</li>
</ul>Styles de compteur
Utilisez un deuxième argument avec counter() pour préciser le type de style de liste :
<ul class="list" style="list-style:none;padding-left:0;">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>Compteurs imbriqués avec counters()
counters(name, separator) (avec un « s ») crée une numérotation imbriquée comme « 1.1 », « 1.2 » et « 2.1 » :
<ol>
<li>Chapter one
<ol>
<li>Intro</li>
<li>Details</li>
</ol>
</li>
<li>Chapter two
<ol>
<li>Overview</li>
</ol>
</li>
</ol>Réinitialisation dans les listes imbriquées
Chaque liste ol imbriquée hérite de la portée du compteur. La fonction counters() utilise automatiquement toute la chaîne de compteurs.
Numérotation des sections
Numérotez automatiquement les titres dans les documents longs :
<h2>Getting Started</h2>
<h3>Installation</h3>
<h3>Configuration</h3>
<h2>Advanced Usage</h2>
<h3>Plugins</h3>Table des matières avec des compteurs
Historiquement, les compteurs CSS servaient à créer des tables des matières et des documents mis en forme. Aujourd’hui, cette tâche est souvent prise en charge par des infrastructures JavaScript, mais les compteurs CSS restent une solution utilisant uniquement CSS.
Vérification rapide
Quelle propriété incrémente un compteur CSS pour chaque élément correspondant ?
Récapitulatif
Les compteurs CSS permettent une numérotation automatique sans JavaScript. Utilisez counter-reset sur le conteneur, counter-increment sur les éléments répétés, puis affichez la valeur avec counter(name) dans la propriété content d’un pseudo-élément. counters() gère la numérotation imbriquée avec des séparateurs.
Questions Fréquemment Posées
La leçon « Compteurs CSS avec ::before » est-elle gratuite ?
Oui — le texte complet de « Compteurs CSS avec ::before » 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 « Compteurs CSS avec ::before » ?
Créez des systèmes de numérotation automatique avec les compteurs CSS et la fonction counter(). 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 3 sur 4.
Combien de temps prend la leçon « Compteurs CSS avec ::before » ?
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