CSS @counter-style - Suffix

The suffix descriptor in the @counter-style rule determines the content added at the end of the marker representation.

Possible Values

  • <symbol>- It indicates that a suffix is added to the end of the marker representation. This can be a <string>,<image>, or <custom-ident>.

Syntax

suffix = <symbol>

CSS Suffix - Basic example

The following example demonstrates the usage of the suffix descriptor.

<html>
<head>
<style>
   @counter-style Chapters {
      system: alphabetic;
      symbols: "a" "b" "c" "d" "e" "f" "g" "h" "i" "j";
      suffix: " ) ";
   }
   .demo-suffix {
      list-style: Chapters;
      font-size: 20px;
      padding-left: 15ch;
      color: blue;
   }
</style>
</head>
<body>
<ul class="demo-suffix">
   <li>CSS-Borders</li>
   <li>CSS-Unit</li>
   <li>CSS-Background</li>
   <li>CSS-Text</li>
   <li>CSS-Button</li>
   <li>CSS-Icons</li>
   <li>CSS-Selectors</li>
</ul>
</body>
</html>
Advertisements