← Back to at-rules

CSS At-rule

@counter-style

Typography

Defines custom counter styles for use with CSS lists and counters.

Syntax

@counter-style name { system: cyclic; symbols: A B C; suffix: '. '; }

Example

@counter-style thumbs { system: cyclic; symbols: '👍'; suffix: ' '; }

Common use cases

  • Custom list markers
  • Emoji or symbol list counters
  • Non-standard numbering systems

Practical developer insight

@counter-style gives you full control over list markers — useful for branded lists or when the built-in list-style-type options aren't enough.

Related

@font-face@layer