CSS - counter() 函数

CSS 的 counter() 函数返回一个字符串，显示命名计数器的当前值。通常，它用于伪元素的 content 属性中。

可能的值

<custom-ident> − 这是计数器的唯一名称，必须与 counter-reset 和 counter-increment 中使用的名称完全匹配，包括大小写。名称不能以两个连字符开头，也不能为 none、unset、initial 或 inherit。
<counter-style> − 此项可选。计数器的样式（可以是 list-style-type 值或 @counter-style 值或 symbols() 函数）。计数器样式的名称可以很简单，例如 numeric、alphabetic 或 symbolic，也可以更复杂，例如东亚或埃塞俄比亚长格式样式。如果未指定任何样式，则默认使用十进制样式。

语法

counter(<countername>, <counterstyle>)

示例

这是一个演示 content 和 counter() 的示例。

<html>
<head>
<style>
   .demo-counter {
      counter-reset: item-counter;
   }
   .demo-counter li {
      list-style-type: none;
      counter-increment: item-counter;
   }
   .demo-counter li::before {
      content: counter(item-counter) ". ";
   }
</style>
</head>
<body>
   <ul class="demo-counter">
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
      <li>Fourth item</li>
      <li>Fifth item</li>
   </ul>
</body>
</html>

打印页面