CSS - suffix
The suffix is used with @counter-style
to specify a symbol that will be appended to the marker representation. A symbol can be a string, image or a CSS identifier. If not specified, the descriptor assumes the default value "\2E\20" ("." full stop followed by a space).
Example
HTML
<ul class="choices"> <li>One</li> <li>Two</li> <li>Three</li> <li>None of the above</li> </ul>
CSS
@counter-style options { system: fixed; symbols: A B C D; suffix: ") "; } .choices { list-style: options; }
Result
Syntax
/* <symbol> values */ suffix: ""; suffix: ") ";
Values
<symbol>
- Specifies a
<symbol>
that is appended to the marker representation.
Formal syntax
<symbol>
Description
The suffix is used with @counter-style
to specify a symbol that will be appended to the marker representation. A symbol can be a string, image or a CSS identifier. If not specified, the descriptor assumes the default value "\2E\20" ("." full stop followed by a space).
Related at-rule | @counter-style |
---|---|
Initial value | "." full stop followed by a space |
Media | all |
Computed value | as specified |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | No support | 33 (33) | No support | No support | No support |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | No support | 33 (33) | No support | No support | No support |
See Also
list-style
,list-style-image
,list-style-position
symbols()
, the functional notation creating anonymous counter styles.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Counter Styles Level 3 The definition of 'suffix' in that specification. |
Candidate Recommendation | Initial definition. |
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/@counter-style/suffix