css at rule descriptor
`suffix` CSS at-rule descriptor
The suffix descriptor of the @counter-style rule specifies content that will be added to the end of the marker representation.
Syntax
/* <symbol> value: string, image, or identifier */
suffix: "";
suffix: ") ";
suffix: url("bullet.png");
Values
The suffix descriptor takes as its value a single <symbol>:
<symbol>- : Specifies a
<symbol>that is appended to the marker representation. It may be a<string>,image, or<custom-ident>.
- : Specifies a
Formal definition
Formal syntax
Examples
Setting a suffix for a counter
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
Interactive exampleOpen the canonical MDN source to run this embedded demo.
Specifications
SpecificationsStandards references are available on the canonical MDN page.
Browser compatibility
Browser compatibilityCompatibility data is available on the canonical MDN page.
See also
- Other
@counter-styledescriptors:system,symbols,additive-symbols,negative,prefix,range,pad,speak-as, andfallback list-style,list-style-image,list-style-positionsymbols(): the functional notation for creating anonymous counter styles- CSS counter styles module
- CSS lists and counters module