suffix
Baseline 2023Newly available
Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
The suffix
descriptor of the @counter-style
rule specifies content that will be added to the end of the marker representation.
Syntax
css
/* <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>
.
Formal definition
Related at-rule | @counter-style |
---|---|
Initial value | ". " (full stop followed by a space) |
Computed value | as specified |
Formal syntax
suffix =
<symbol>
<symbol> =
<string> |
<image> |
<custom-ident>
<image> =
<url> |
<gradient>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
Examples
Setting a suffix for a counter
HTML
html
<ul class="choices">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>None of the above</li>
</ul>
CSS
css
@counter-style options {
system: fixed;
symbols: A B C D;
suffix: ") ";
}
.choices {
list-style: options;
}
Result
Specifications
Specification |
---|
CSS Counter Styles Level 3 # counter-style-suffix |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
suffix |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
See also
- Other
@counter-style
descriptors:system
,symbols
,additive-symbols
,negative
,prefix
,range
,pad
,speak-as
, andfallback
list-style
,list-style-image
,list-style-position
symbols()
: the functional notation for creating anonymous counter styles- CSS counter styles module
- CSS lists and counters module