Understanding CSS Counters
Tags: css, webdev, javascript
Published: 2020-03-09 08:05:17

CSS Counters are basically variables whose values can be used to number the content based on its placement in the web document. Generally in HTML, `<ol>` tag is used to give ordered numbers to the items of the list, but CSS counter allows us to do the same thing but in a different way. For example, you can use CSS counter to automatically number the headings or section in a web page. The values of the CSS counters can be incremented by CSS rules, which helps in tracking how many times the rules are used.

CSS counters uses the following properties:

* **counter-reset**— Creates or resets a CSS counter. To use a counter, it must be first initialized to a value with this property. This value is 0 by default. Same property can be used to changes its value to any specific number.

* **counter-value** — Once initialized, a counter’s value can be increased with this property.

* **content** — Inserts generated content.

* **counter()** or **counters()** function — Adds value of the counter to the element. The value of the counter can be displayed using either the counter() or counters() function in content property.

The **counter()** function has two forms: ‘counter(name)’ or ‘counter(name, style)’. The generated text is the value of the innermost counter of the given name in scope at the given pseudo-element. It is formatted in the specified style given as parameter to counter() function (decimal by default).

The **counters()** function also has two forms: ‘counters(name, string)’ or ‘counters(name, string, style)’. The generated text is the value of all counters with the given name in scope at the given pseudo-element, from outermost to innermost, separated by the specified string. The counters are rendered in the indicated style given as parameter to counter() function (decimal by default).

To use a CSS counter, it must be created with counter-reset. The counter’s name cannot be “none”, “inherit” or “initial”. If it is so, it will be ignored.

Let’s check an example:

## **Basic Counters**

The following example creates a counter for entire page (since we have created a counter for chapter in body selector), then we increment the counter value for each `<h1>` element and text “Chapter <counter value> — “ to the beginning of each `<h1>` element.

**CSS**

![](https://cdn-images-1.medium.com/max/7808/1*i7LE3ZsTkirqAX-0KjLyjg.png)

**HTML**

![](https://cdn-images-1.medium.com/max/2888/1*HQ1oNvtPS7DPScYpLoFc9g.png)

**Output**

![](https://cdn-images-1.medium.com/max/2000/1*vaXq7wK0qzeRY7USuVX4uw.png)

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="aneeket" data-slug-hash="PoqOWJa" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Basic Counters">
  <span>See the Pen <a href="https://codepen.io/aneeket/pen/PoqOWJa">
  Basic Counters</a> by Aniket Kudale (<a href="https://codepen.io/aneeket">@aneeket</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## **Nested Counters**

The following example creates one counter for the page (chapter) and one counter for each `<h1>` element (section) The “chapter” counter will be counted for each `<h1>` element with “Section <value of the chapter counter>.”, and the “section” counter will be counted for each `<h3>` element with “<value of the chapter counter>.<value of the section counter>”

**CSS**

![](https://cdn-images-1.medium.com/max/4776/1*PYlunTZXIcuqNf6klWQtMA.png)

**HTML**

![](https://cdn-images-1.medium.com/max/3288/1*J-3-pL61oAceDThJGBsFQw.png)

**Output**

![](https://cdn-images-1.medium.com/max/2000/1*zZGfpnXTCmfl9727id1ijQ.png)

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="aneeket" data-slug-hash="mdJqRMX" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Nested Counters">
  <span>See the Pen <a href="https://codepen.io/aneeket/pen/mdJqRMX">
  Nested Counters</a> by Aniket Kudale (<a href="https://codepen.io/aneeket">@aneeket</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

CSS Counter are supported almost by all modern browsers.

https://caniuse.com/#search=counters

I hope you liked this refresher on CSS Counters.