CSS @counter-style - 負數

在自定義計數器樣式中，negative 描述符允許您更改負計數器值的表示形式。

它允許指定在計數器值為負數時，在計數器表示形式的開頭或結尾新增的符號。

可能的值

<symbol> - 如果只指定一個值，則在計數器為負數時，將其新增到計數器表示形式之前。如果指定兩個值，則在計數器為負數時，第一個值新增到之前，第二個值新增到計數器表示形式之後。

使用negative 描述符時，需要注意以下幾點

如果計數器值為負數，則描述符中指定的符號將新增到計數器表示形式的開頭。
如果指定了第二個符號，它將被附加到表示形式。此功能適用於使用負號的symbolic、alphabetic、numeric、additive 或extends 系統。
對於其他沒有負計數器值的系統，如果指定了 negative 描述符，則會忽略它。

語法

negative = <symbol> <symbol>?

CSS Negative - 渲染負計數器

以下示例演示了negative 描述符的使用。

<html>
<head>
<style>
   @counter-style negative {
   system: numeric;
   symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
   negative: "[-" "]";
   }
   .list {
   list-style: negative;
   }
</style>
</head>
<body>
<ol class="list" start="-4">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
   <li>Item 6</li>
   <li>Item 7</li>
   <li>Item 8</li>
   <li>Item 9</li>
</ol>
</body>
</html>

列印頁面