Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

symbols()

Our volunteers haven't translated this article into Türkçe yet. Join us and help get the job done!

Summary

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.

Syntax

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.

Example

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

The above example code will render a list like this:

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

Specifications

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,