When defining custom counter styles, the negative descriptor lets you alter the representations of negative counter values, by providing a way to specify symbols to be appended or prepended to the counter representation when the value is negative.
On this page
negative
Syntax
css
/* <symbol> values */
negative: "-"; /* Prepends '-' if value is negative */
negative: "(" ")"; /* Surrounds value by '(' and ')' if it is negative */
Values
Description
If the counter value is negative, the symbol provided as value for the descriptor is prepended to the counter representation; and a second symbol if specified, will be appended to the representation. The negative descriptor has effect only if the system value is symbolic, alphabetic, numeric, additive, or extends, if the extended counter style itself uses a negative sign. If the negative descriptor is specified for other systems that don't support negative counter values, then the descriptor is ignored.
Formal definition
| Related at-rule | @counter-style | 
|---|---|
| Initial value | "-" hyphen-minus | 
| Computed value | as specified | 
Formal syntax
negative = 
  <symbol> <symbol>?  
<symbol> = 
  <string>        |
  <image>         |
  <custom-ident>  
<image> = 
  <url>       |
  <gradient>  
<url> = 
  url( <string> <url-modifier>* )  |
  src( <string> <url-modifier>* )  
Examples
Rendering negative counters
HTML
html
<ol class="list" start="-3">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ol>
CSS
css
@counter-style neg {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  negative: "(-" ")";
}
.list {
  list-style: neg;
}
Result
Specifications
| Specification | 
|---|
| CSS Counter Styles Level 3 # counter-style-system | 
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
| negative | 91 | 91 | 33 | No | 77 | 17 | 91 | 91 | 33 | 64 | 17 | 16.0 | 
See also
- list-style,- list-style-image,- list-style-position
- symbols(), the functional notation creating anonymous counter styles.
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
 https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/negative