CSS - counter()

Quiz

The CSS counter() function gives you a string displaying the current value of a named counter. Usually, it's employed in the content property of pseudo-elements.

Possible Values

<custom-ident> − This is a unique name for the counters that must exactly match the case as used in counter-reset and counter-increment. The name must not begin with two hyphens and cannot be none, unset, initial, or inherit.
<counter-style> − This is Optional. The style of the counter (can be a list-style-type value or @counter-style value or symbols() function.). The name of a counting style can be simple, such as numeric, alphabetic, or symbolic, or it can be more complicated, such as East Asian or Ethiopian longhand style. If you don't specify any, the decimal style is used by default.

Syntax

counter(<countername>, <counterstyle>)

Example

Here is an example that demonstrates content and counter()

<html>
<head>
<style>
   .demo-counter {
      counter-reset: item-counter;
   }
   .demo-counter li {
      list-style-type: none;
      counter-increment: item-counter;
   }
   .demo-counter li::before {
      content: counter(item-counter) ". ";
   }
</style>
</head>
<body>
   <ul class="demo-counter">
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
      <li>Fourth item</li>
      <li>Fifth item</li>
   </ul>
</body>
</html>

Print Page