后缀
@counter-style
规则的suffix
描述符指定将在标记表示的末尾添加的内容。
语法
css
/* <symbol> value: string, image, or identifier */
suffix: "";
suffix: ") ";
suffix: url(bullet.png);
值
suffix
描述符将其值作为单个<symbol>
<symbol>
-
指定附加到标记表示的
<symbol>
。它可以是<string>
、<image>
或<custom-ident>
。
正式定义
相关@规则 | @counter-style |
---|---|
初始值 | ". "(句点后跟空格) |
计算值 | 如指定 |
正式语法
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>* )
示例
为计数器设置后缀
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;
}
结果
规范
规范 |
---|
CSS 计数器样式级别 3 # counter-style-suffix |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。
另请参阅
- 其他
@counter-style
描述符:system
、symbols
、additive-symbols
、negative
、prefix
、range
、pad
、speak-as
和fallback
list-style
、list-style-image
、list-style-position
symbols()
:用于创建匿名计数器样式的功能表示法- CSS 计数器样式模块
- CSS 列表和计数器模块