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>

列印頁面