suffix
Baseline 2023
Newly 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
BCD tables only load in the browser
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