CSS @counter-style - Negative

In custom counter styles, the negative descriptor allows you to change the representation of negative counter values.

It allows specifying symbols to be added either at the beginning or at the end of the counter representation when the value is negative.

Possible Values

  • <symbol> - If only one value is specified, it is added before the counter representation when the counter is negative. If two values are specified, the first one is added before and the second one is added after the counter representation when the counter is negative.

Following points need to be noted while using negative descriptor :

  • If the counter value is negative, the symbol specified in the descriptor is added at the beginning of the counter representation.

  • If a second symbol is specified, it will be appended to the representation. This functionality works for symbolic, alphabetic, numeric, additive or extends system that use a negative sign.

  • For other systems whout negative counter values, the negative descriptor is ignored if specified.

Syntax

negative = <symbol> <symbol>?

CSS Negative - Rendering Negative Counters

The following example demonstrates the usage of the negative descriptor.

<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>
Advertisements