前缀

基线 2023

最新可用

自 2023 年 9 月起，此功能适用于最新的设备和浏览器版本。此功能可能在旧设备或浏览器中不起作用。

The @counter-style rule's prefix descriptor specifies content that will be added to the beginning of the counter's marker representation.

When the counter value is negative, the prefix comes before the negative sign and any other <symbol>s added by the negative descriptor.

语法

css
/* <symbol> value: string, image, or identifier */
prefix: "»";
prefix: "Page ";
prefix: url(bullet.png);

值

The prefix descriptor takes as its value a single <symbol>

<symbol>

Specifies a <symbol> — a <string>, <image>, or <custom-ident> — that is prepended to the marker representation.

正式定义

相关 at-rule@counter-style
初始值"" (空字符串)
计算值按指定

正式语法

prefix = 
  <symbol>  

<symbol> = 
  <string>        |
  <image>         |
  <custom-ident>  

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

示例

为计数器添加前缀

在此示例中，每个计数器数字都以“Book ”（带空格）为前缀，并以冒号 (:) 结尾。冒号使用 suffix 描述符添加。

HTML

html
<ol class="books">
  <li>Flamer, by Mike Curato</li>
  <li>Gender Queer: A Memoir, by Maia Kobabe</li>
  <li>Tricks, by Ellen Hopkins</li>
  <li>The Handmaid's Tale: The Graphic Novel, by Margaret Atwood</li>
  <li>Crank, by Ellen Hopkins</li>
</ol>

CSS

css
@counter-style books {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  prefix: "Book ";
  suffix: ": ";
}

.books {
  list-style: books;
  padding-left: 15ch;
}

结果

规范

规范
CSS 计数器样式级别 3
# counter-style-prefix

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见