CSS - suffix

Example

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

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

.choices {
  list-style: options;    
}

Syntax  

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

Values

<symbol>

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

Formal syntax

<a href="css/@counter-style/suffix#symbol"><symbol></a><p>where <br><code><symbol> = <a href="css/string" title=""><string></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/image" title=""><image></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <ident></code></p>

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

Browser Compatibility  

See Also  

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

Specifications  

License