Using CSS Counters is easy as 1, 2, 3
Tags: css, beginners, tutorial
Published: 2020-05-20 17:21:30

---
title: Using CSS Counters is easy as 1, 2, 3
published: true
description: CSS counters let you adjust the appearance of content based on its location in a document. For example, you can use counters to automatically number the headings in a webpage.
tags: CSS, beginners, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/k330q944w9wsjzhhfux6.jpg
---

Don't you just love it when you can do things with just CSS? No JavaScript at all? CSS Counters are awesome and could prove useful to you one day.

## **How to use CSS Counters?**

Instead of writing this HTML:

```html
<div>
  <h1>1. First section</h1>
  <p>Some really interesting content</p>
  <h1>2. Second section</h1>
  <p>Some really interesting content</p>
</div>
```

You could write the following to achieve the same result:

```html
<div class="simple-example">
  <h1>First section</h1>
  <p>Some really interesting content</p>
  <h1>Second section</h1>
  <p>Some really interesting content</p>
</div>
```

This makes it easier to add more sections later or even change the order without editing the text itself manually!

All you need is the following CSS:

```css
.simple-example {
  /* start or reset the counter */
  counter-reset: sectionCount; 
}
.simple-example h1 { 
  /* counter = counter + 1 */
  counter-increment: sectionCount; 
}
.simple-example h1::before { 
  /* display the number and a . before the heading */
  content: counter(sectionCount)". "; 
}
```

With this CSS the output will become `"1. First section"` instead of `"First section"`. 

## **Advanced example**

Check out the demo here: https://codepen.io/EddyVinck/pen/OJyrBJj

![CSS Counters](https://media.giphy.com/media/l3lc03z0dwyhkjr8hY/giphy.gif)

This demo has utilizes two counters at the same time to achieve the desired effect. You can add new rules to the list and the numbers will be updated automatically!

### HTML

```html
<section class="paper">
  <h1>Terms and conditions</h1>
  <h2>Terms</h2>
  <ol>
    <li>Software: a digital product</li>
    <li>Acceptance: By using the Website ...</li>
  </ol>
  <h2>
    Conditions
  </h2>
  <ol id="conditions">
    <li>Distribution: You will not distribute your license</li>
    <li>Authentication: You will not share your account</li>
    <li>Follow Eddy Vinck on Twitter if you found this helpful. 🐦</li>
  </ol>
</section>
```

### CSS

```css
section {
  counter-reset: heading;
}
h2 {
  counter-increment: heading;
}
h2::before {
  content: counter(heading)". ";
}
ol {
  padding-left: 0;
  counter-reset: ruleNumber;
  list-style: none;
}
ol li {
  counter-increment: ruleNumber;
  position: relative;
  padding-left: 40px;
}
ol li::before {
  position: absolute;
  left: 0;
  content: counter(heading)"."counter(ruleNumber)".";
}
```

## **Conclusion**

CSS is awesome, but you already knew that. I hope you will be able to use CSS counters yourself in the future.

If you found this article helpful you can follow me on Twitter: [@Veinq_](https://twitter.com/veinq_). I post smaller tips including CSS and JavaScript on there as well.

Here is one of my latest tips people really enjoyed.

{% twitter 1261260706617442305 %}