Using CSS Counters is easy as 1, 2, 3

#css #beginners #tutorial

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