CSS @counter-style Rule
Example
@counter-style thumbs {
system: cyclic;
symbols: "\1F44D";
suffix: " ";
}
ul {
list-style: thumbs;
}Meaning
The @counter-style at-rule lets you define counter styles that are not part of the predefined set of styles. A @counter-style rule defines how to convert a counter value into a string representation.
The initial version of CSS defined a set of useful counter styles. However, although more styles were added to this set of predefined styles over the years, this system proved too restrictive to fulfill the needs of worldwide typography.
The @counter-style at-rule addresses this shortcoming in an open-ended manner, by allowing authors to define their own counter styles when the pre-defined styles aren't fitting their needs.
Standard Syntax
@counter-style counter-style-name {
declaration-list
};Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Status
Property Values
The following table describes the values of this property.
| Value | Description | |
|---|---|---|
| counter-style-name | Specifies the list style name. | |
| declaration-list | ||
| system | Specifies the algorithm to be used for converting the integer value of a counter to a string representation. | |
| negative | Lets the author specify symbols to be appended or prepended to the counter representation if the value is negative. | |
| prefix | Specifies a symbol that should be prepended to the marker representation. | |
| suffix | Specifies, similar to the prefix descriptor, a symbol that is appended to the marker representation. Suffixes come after the marker representation. | |
| range | Defines the range of values over which the counter style is applicable. | |
| pad | Is used when you need the marker representations to be of a minimum length. | |
| fallback | Specifies a system to fall back into if either the specified system is unable to construct the representation of a counter value or if the counter value is outside the specified range. | |
| symbols | Specifies the symbols that are to be used for the marker representations. | |
| additive-symbols | While the symbols specified in the symbols descriptor is used for constructing marker representation by most algorithms, some systems such as 'additive' rely on additive tuples described in this descriptor. | |
| speak-as | Describes how to read out the counter style in speech synthesizers, such as screen readers. | |
More Example
@counter-style circled-alpha {
system: fixed;
symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
suffix: " ";
}
ul {
list-style: circled-alpha;
}