Générateur de compteurs CSS Générer des compteurs CSS pour des listes numérotées personnalisées avec différents styles et imbriquements.

🎨

Générateur de compteurs CSS

Générer des compteurs CSS pour des listes numérotées personnalisées avec différents styles et imbriquements.

Configurer le compteur

Définissez le nom du compteur, le style (décimal, romain, alphabétique), le préfixe et le suffixe.

Activer l'imbrication

Activez facultativement les compteurs imbriqués avec des caractères séparateurs personnalisés.

Copier le CSS

Prévisualisez la liste numérotée et copiez le CSS de compteur complet.

Loading tool...

What Is Générateur de compteurs CSS?

Le générateur de compteurs CSS crée des listes numérotées personnalisées en utilisant les propriétés CSS counter-reset, counter-increment et content. Les compteurs CSS offrent plus de flexibilité que la numérotation standard des listes <ol>, en prenant en charge différents styles de numérotation, des préfixes et suffixes personnalisés, une numérotation imbriquée ainsi qu'un style indépendant du type de liste. Cet outil vous permet de configurer le nom du compteur, de choisir parmi dix styles de numérotation (décimal, décimal avec zéro initial, alphabétique minuscule ou majuscule, romain minuscule ou majuscule, grec, etc.), de définir des textes de préfixe et de suffixe personnalisés et, facultativement, d'activer les compteurs imbriqués avec un séparateur configurable. L'aperçu montre le compteur appliqué à une liste d'exemple avec du contenu réaliste, et le CSS généré inclut toutes les propriétés de compteur nécessaires.

Why Use Générateur de compteurs CSS?

Dix styles de numérotation, notamment décimal, romain et alphabétique
Texte de préfixe et de suffixe personnalisable autour des valeurs du compteur
Prise en charge des compteurs imbriqués avec séparateurs configurables
Aperçu avec un contenu de liste réaliste

Common Use Cases

Documents légaux

Créez des sections numérotées imbriquées (1.1, 1.2, 2.1) pour les documents juridiques et techniques.

Guides étape par étape

Concevez des étapes numérotées personnalisées avec des compteurs stylisés pour les tutoriels.

Table des matières

Générez une numérotation hiérarchique pour la table des matières d'un document.

Listes ordonnées personnalisées

Remplacez la numérotation de liste par défaut par des compteurs personnalisés stylisés.

Technical Guide

Les compteurs CSS utilisent trois principales propriétés : counter-reset initialise un compteur sur un élément parent, counter-increment incrémente le compteur sur les éléments enfants, et counter() ou counters() dans la propriété content affiche la valeur. La propriété counter-reset crée une nouvelle instance de compteur : counter-reset: section. La propriété counter-increment l'incrémente : counter-increment: section. La propriété content sur un pseudo-élément ::before affiche le compteur : content: counter(section). La fonction counter() accepte un argument de style facultatif : counter(section, upper-roman). Pour les compteurs imbriqués, chaque niveau réinitialise son propre sous-compteur. La fonction counters() (notez le 's') gère les portées imbriquées : counters(section, ".") produit une notation "1.2.3". Les types de liste disponibles incluent decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman, lower-greek, etc. Plusieurs compteurs peuvent être définis et utilisés indépendamment.

Tips & Best Practices

1
Utilisez counter-reset sur l'élément parent, counter-increment sur les enfants
2
Utilisez counters() avec un séparateur pour une numérotation imbriquée comme 1.1.1
3
Le texte de préfixe et de suffixe personnalisable rend les compteurs adaptés aux documents légaux
4
Les compteurs CSS fonctionnent avec n'importe quel élément, pas seulement les listes

Related Tools

Générateur de tableaux CSS

Créez des tableaux HTML élégamment stylisés avec des couleurs personnalisables, des rayures et des effets au survol.

🎨 CSS & Design

Générateur d'échelle typographique

Générer une échelle typographique modulaire avec une taille de base, un ratio et des unités personnalisables.

🎨 CSS & Design

Générateur de Variables CSS

Générer des propriétés personnalisées CSS (variables) pour les couleurs, les espacements et la typographie.

🎨 CSS & Design

Générateur de feuille de style d'impression

Générer des feuilles de style @media pour l'impression avec des options pour masquer les éléments, styler le texte et contrôler les sauts de page.

🎨 CSS & Design

Frequently Asked Questions

Q Quelle est la différence entre counter() et counters() ?

counter() affiche une seule valeur de compteur. counters() affiche des valeurs de compteurs imbriqués avec une chaîne de séparateur.

Q Puis-je utiliser les compteurs CSS sur n'importe quel élément ?

Oui, les compteurs CSS fonctionnent sur n'importe quel élément, pas seulement les éléments <ol> ou <li>.

Q Comment réinitialiser le compteur ?

Appliquez counter-reset sur l'élément parent. Le compteur commence à 0 (la première incrémentation le porte à 1).

Q Puis-je commencer la numérotation à partir d'un numéro spécifique ?

Oui, utilisez counter-reset: section 5 pour commencer à partir de 5 (la première affichage sera 6).

Q Les compteurs CSS sont-ils accessibles ?

Les compteurs CSS dans le contenu ::before sont lus par la plupart des lecteurs d'écran, mais peuvent ne pas être cohérents. Utilisez des listes HTML sémantiques lorsque cela est possible.

About This Tool

Générateur de compteurs CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.