Using CSS Counters is easy as 1, 2, 3

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>

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>

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)". "; 
}

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

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>

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

Here is one of my latest tips people really enjoyed.

Eddy Vinck 👨‍💻 JavaScript

@veinq_

Did you know about Navigator.vibrate() ? Twitter uses it on their website to make your phone vibrate when you like a tweet.

I recommend liking this tweet to try it 👉♥️ 😁

#100DaysOfCode

11:42 AM - 15 May 2020

384 3478