@counter-style CSS At-Rule

Description

The CSS @counter-style at-rule allows you to define custom counter styles. CSS counters let you track and display the number of times a particular element appears in a document. For example, you can use counters to create numbered lists, paginate a document, or generate unique identifiers for elements.

Prior to CSS3, the counter styles you could choose from were somewhat limited. CSS1 and CSS2 included a number of predefined counter styles such as square, upper-roman, lower-alpha, etc.

The @@counter-style at-rule gives you more flexibility by allowing you to define your own counter styles. This can be useful for creating custom numbering schemes, or for matching the counter style of your document to a specific design aesthetic.

To define a custom counter style, you use the @counter-style at-rule followed by the name of the counter style and a list of descriptors. The descriptors define how the counter value should be converted into a string representation.

Syntax

@counter-style <counter-style-name> {
  [ system: <counter-system>; ] ||
  [ symbols: <counter-symbols>; ] ||
  [ additive-symbols: <additive-symbols>; ] ||
  [ negative: <negative-symbol>; ] ||
  [ prefix: <prefix>; ] ||
  [ suffix: <suffix>; ] ||
  [ range: <range>; ] ||
  [ pad: <padding>; ] ||
  [ speak-as: <speak-as>; ] ||
  [ fallback: <counter-style-name>; ]
}
where 
<counter-style-name> = <custom-ident>

Values

systemSpecifies the algorithm that will be used to convert the counter's integer value to its string representation.
negativeAllows the author to specify the characters to be appended or appended to the count representation if the value is negative.
prefixSpecifies the character to be added before the marker representation. Prefixes are added to the representation at the final stage, so in the final representation of the counter it comes before a negative sign.
suffixSpecifies, similar to a prefix descriptor, the character that is added to the marker representation. The suffixes come after the presentation marker.
rangeSpecifies the range of values to which the counter style is applied. If a counter style is used to represent a counter value outside of its ranges, the counter style reverts to its reservation style.
padUsed when you want marker representations to be of the minimum length. For example, if you want the counters to start at 01 and go through 02, 03, 04, etc., then the descriptor must be used pad. For views larger than the specified value, the marker is built as usual.
fallbackSpecifies the system to contact if the specified system is unable to generate a representation of the counter value, or if the counter value is outside the specified range. If the specified fallback also fails to represent a value, then the fallback style fallback, if specified, is used. If there are no redundant systems described, or if a chain of redundant systems cannot represent the value of the counter, then it will eventually revert to decimal style.
symbolsSpecifies the characters to be used for marker representations. Symbols can contain a string, images, or user IDs. How symbols are used to construct the marker representation depends on the algorithm specified in the system descriptor. For example, if the specified system is fixed, then each of the N characters specified in the descriptor will be used to represent the first N characters of the counter. Once the specified character set is exhausted, the rest of the list will use the fallback style.
additive-symbolsAlthough the characters specified in the character descriptor are used to construct the marker representation by most algorithms, some systems, such as "additive", rely on the additive tuples described in this descriptor. Each additive tuple consists of a counter character and a non-negative integer weight. Additive tuples must be listed in descending order of their weights.
speak-asDescribes how to read the counter style in speech synthesizers such as screen readers. For example, the value of a marker character can be read as numbers or alphabets for ordered lists, or as beeps for unordered lists, based on the value of this descriptor.

Example

@counter-style circled-alpha {

 system: fixed;

 symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;

 suffix: ;

}



.items {

 list-style: circled-alpha;

}