DEV Community

loading...
Cover image for Using CSS Counters is easy as 1, 2, 3

Using CSS Counters is easy as 1, 2, 3

Eddy Vinck
I'm doing my best
・2 min read

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:

<div>
  <h1>1. First section</h1>
  <p>Some really interesting content</p>
  <h1>2. Second section</h1>
  <p>Some really interesting content</p>
</div>
Enter fullscreen mode Exit fullscreen mode

You could write the following to achieve the same result:

<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>
Enter fullscreen mode Exit fullscreen mode

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:

.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)". "; 
}
Enter fullscreen mode Exit fullscreen mode

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

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

<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>
Enter fullscreen mode Exit fullscreen mode

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)".";
}
Enter fullscreen mode Exit fullscreen mode

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_. I post smaller tips including CSS and JavaScript on there as well.

Here is one of my latest tips people really enjoyed.

Discussion (2)

Collapse
bayuangora profile image
Bayu Angora

Simple trick with big advantage.

Collapse
reythedev profile image
Rey van den Berg

Cheers Eddy! Super helpful manπŸ‘