CSS - symbols()

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.

Example

 

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

The above example code will render a list like this:

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

Syntax  

CSS
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.

Description  

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.

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  

Specifications  

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

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/symbols

CSS CSS Counter Styles Reference Référence