suffix

Summary

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).

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>

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

Specifications

Browser compatibility

See also

• list-style, list-style-image, list-style-position
• symbols(), the functional notation creating anonymous counter styles.