CSS - counter()

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

  • <counter-name> − 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 etc.

Syntax

counter(<countername>, <counterstyle>)

CSS counter() - Basic Example

Here is an example that demonstrates counter() function.

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

CSS counter() - Using Two Styles.

This program demonstrates the usage of the counter() function with two different counter styles.

<html>
<head>
<style>
   ul {
      counter-reset: demo-counter;
      list-style: none;
      margin: 10px;
      padding: 10px;
   }
   li {
      counter-increment: demo-counter;
      margin-bottom: 1em;
   }
   li::before {
      content: "[" counter(demo-counter) "] ";
      font-weight: bold;
      color: #3498db;
   }
   li::after {
      content: " (Level " counter(demo-counter, lower-roman) ")";
      font-style: italic;
      color: #e74c3c;
   }
</style>
</head>
<body>
<ul>
   <li>This is the first item</li>
   <li>This is the second item</li>
   <li>This is the third item</li>
   <li>This is the fourth item</li>
   <li>And this is fifth and last item</li>
</ul>
</body>
</html>
Advertisements