We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS


The symbols() CSS function lets you define counter styles inline, directly as the value of a property such as list-style. Unlike @counter-style, symbols() is anonymous (i.e., it can only be used once). Although less powerful, it is shorter and easier to write than @counter-style.


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

<symbols-type> can be one of the following:

  • cyclic: The system cycles through the given values in the order of their definition, and returns to the start when it reaches the end.
  • numeric: The system interprets the given values as the successive units of a place-value numbering system.
  • alphabetic: The system interprets the given values as the digits of an alphabetic numbering system, like a place-value numbering system but without 0.
  • symbolic: The system cycles through the values, printing them an additional time at each cycle (one time for the first cycle, two times for the second, etc.).
  • fixed: The system cycles through the given values once, then falls back to Arabic numerals.





ol {
  list-style: symbols(cyclic "*" "†" "‡");



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

See also

Document Tags and Contributors

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