🎨 @counter‑style Generator

@counter-style is a CSS at-rule that lets you define custom counter styles for ordered lists, counters, and any element using list-style-type or the counter() function. Instead of being limited to built-in styles like decimal, lower-alpha, or upper-roman, you can create entirely custom numbering systems — using emojis, special characters, custom symbols, or even your own numeric bases. It gives you full creative control over list markers, making your content more engaging and visually distinctive.

• cyclic — Cycles through provided symbols in a loop. Great for alternating bullet styles (e.g., ○ ● ○ ●…).
• fixed — Uses a finite set of symbols; once exhausted, falls back to the fallback style. Ideal for top-N lists.
• symbolic — Repeats each symbol incrementally (★, ★★, ★★★…). Perfect for star ratings or tier indicators.
• alphabetic — Letter-style counting where symbols map to an alphabet (like A–Z, then AA, AB…). No zero concept.
• numeric — Positional number system. First symbol = 0, second = 1, etc. Use for custom digits like circled numbers or non-Latin numerals.
• additive — Sum-based system like Roman numerals. Define weight+symbol pairs (e.g., 1000 M, 500 D). Values are built by adding weighted symbols.
• extends — Inherits all settings from an existing counter-style, allowing you to tweak only specific descriptors.

Copy the generated @counter-style block and paste it into your CSS file (usually at the top level, not nested inside other rules). Then reference your custom counter by its name (default: custom-counter) in any list-style-type property or counter() function. Example:

ol.my-list {
  list-style-type: custom-counter;
}

/* Or with counter() */
.my-section h2::before {
  counter-increment: section;
  content: counter(section, custom-counter) ". ";
}

Firefox has supported @counter-style since version 33 (2014). Chrome and Edge added support in version 91 (May 2021). Safari joined with version 17 (September 2023). As of 2024, global browser support exceeds 92%. For older browsers, always specify a reliable fallback descriptor (like decimal or disc) so the list remains readable even if the custom style isn't recognized.

symbols is used by cyclic, fixed, symbolic, alphabetic, and numeric systems. It's a flat list of symbols where position matters (especially for numeric and alphabetic). additive-symbols is only used by the additive system. It consists of weight symbol pairs, sorted from largest weight to smallest. The browser constructs the counter value by summing the largest applicable weighted symbols — exactly how Roman numerals work (1000=M, 900=CM, 500=D, etc.).

Absolutely! Emojis work perfectly as symbols in @counter-style. Use the cyclic system to rotate through a set of emojis, symbolic to repeat a single emoji (like ⭐, ⭐⭐, ⭐⭐⭐), or even numeric if you want emoji-based digits. Just paste your emojis into the symbols input separated by commas. Try the "🍎 Emoji Fruits" preset for a colorful example! Note: Emoji appearance varies by OS and browser — test across platforms for consistency.

Use the symbolic system with a single star symbol (★). The symbolic system repeats the symbol for each increment: item 1 gets 1 star, item 2 gets 2 stars, and so on. Click the "★ Stars" preset to see it in action. You can replace ★ with any character — try ♥, ♦, ✓, or even custom Unicode symbols. This is perfect for review lists, tier rankings, or difficulty indicators.

First, ensure your browser supports @counter-style (Chrome 91+, Firefox 33+, Safari 17+). If symbols contain special characters, make sure they're properly comma-separated. For the additive system, weights must be positive integers listed in descending order, and the sum of available weights must be able to represent all counter values. If symbols are exhausted (e.g., in fixed system), the preview falls back to decimal — this is expected behavior, not an error.