CSS @counter-style - Prefix

The prefix descriptor in the @counter-style rule defines the content that is added to the beginning of the marker representation. If it is not specified, the default value is an empty string " ".

Possible Values

  • <symbol> - Specifies content added to the beginning of the marker representation. This can be a <string>, <image>, <custom-ident>.

Syntax

prefix = <symbol>

CSS Prefix - Basic example

The following example demonstrates the usage of the prefix descriptor.

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