CSS - suffix

The suffix is used with @counter-style to specify a symbol that will be appended to the marker representation. A symbol can be a string, image or a CSS identifier. If not specified, the descriptor assumes the default value "\2E\20" ("." full stop followed by a space).

Example

HTML

<ul class="choices">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>None of the above</li>
</ul>

CSS

@counter-style options {
  system: fixed;
  symbols: A B C D;
  suffix: ") ";
}

.choices {
  list-style: options;    
}

Result

Syntax   

/* <symbol> values */
suffix: "";
suffix: ") ";

Values

<symbol>
Specifies a <symbol> that is appended to the marker representation.

Formal syntax

<symbol>
where 
<symbol> = <string> | <image> | <ident>

Description  

The suffix is used with @counter-style to specify a symbol that will be appended to the marker representation. A symbol can be a string, image or a CSS identifier. If not specified, the descriptor assumes the default value "\2E\20" ("." full stop followed by a space).

Related at-rule@counter-style
Initial value"." full stop followed by a space
Mediaall
Computed valueas specified
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support No support 33 (33) No support No support No support
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support 33 (33) No support No support No support

See Also  

Specifications  

Specification Status Comment
CSS Counter Styles Level 3
The definition of 'suffix' in that specification.		 Candidate Recommendation Initial definition.

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/@counter-style/suffix