The symbols() function allows counter styles to be defined inline, directly as the value of the CSS property. Unlike styles defines with @counter-style, these styles are anonymous. The symbols() function doesn't have all the capabilities and options of the @counter-style at-rule, but is useful in cases such as when the style is used only once and you don't need all the the options provided by @counter-style.


symbols() = symbols( <symbols-type>? [ <string> | <image> ]+ );

<symbols-type> is one of the following keyword:

  • cyclic, meaning that the system repeatedly goes through the different values, in the order of their definition and in an endless cycle.
  • numeric, meaning that the system interprets the given values as the successive units of a place-value numerical system.
  • alphabetic, meaning that the system interprets the given values as the digits of an alphabetic numbering system, as a place-value numerical system, but without 0.
  • symbolic, meaning that the system cycles through the values, printing them one more time at each cycle (one time for the first cycle, two times for the second, …).
  • fixed, meaning that the system prints each symbol once, then falls back to arab numericals.


ol {
    list-style: symbols(cyclic "*" "\2020" "\2021");

The above example code will render a list like this:

  • * One
  • † Two
  • ‡ Three
  • * Four
  • † Five


Specification Status Comment
CSS Counter Styles Level 3
The definition of 'symbols()' in that specification.
Working Draft Initial defintion

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support Not supported 35 (35) Not supported Not supported Not supported
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support Not supported 35.0 (35) Not supported Not supported Not supported

See also

Document Tags and Contributors

 Contributors to this page: teoli, jsx
 Last updated by: teoli,