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>

打印页面