DEV Community

Bernard Faria
Bernard Faria

Posted on

Do you know how to do automatic numbering with a CSS counter?

#css #tutorial #beginners #webdev

As you may already know, when we add lists with the <ol> element, the list is automatically numbered. Using CSS Counter, we can number any element. So, let's see how this is done.

The CSS counter consists of two main properties: counter-reset andcounter-increment. The counter-reset is used to reset the count, while the counter-increment - together with the pseudo-element - is used to add the numbers.

body {
  counter-reset: number;
}

h1:before {
  counter-increment: number;
  content: "counter(number) ";
}
Enter fullscreen mode Exit fullscreen mode

In addition, you can also change the type of the number specified in the content property. For example Roman numbers.

h2:before {
  counter-increment: first;
  content: counter(number, upper-roman) ". ";
}
Enter fullscreen mode Exit fullscreen mode

This property can only be useful for a specific type of website and you are unlikely to use it every day.

Top comments (1)

Collapse
 
cialdi profile image
Massimiliano Cialdi •

I have tried, but I have some problems.
I don't know if I can write everything here (it's quite long). I try:

I would like, in my html, for headings to be autonumbered. I'm also forced to use <div> though. For this I created an html to test:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    body {
      font-family: "Helvetica Neue", Helvetica, Arial;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      color: #3b3b3b;
      -webkit-font-smoothing: antialiased;
      font-smoothing: antialiased;
      counter-reset: section-h1 section-h2 section-h3;
    }
    h1 {
      counter-reset: section-h2;
    }
    h1::before {
      counter-increment: section-h1;
      content: counter(section-h1) ". ";
    }
    h2 {
      counter-reset: section-h3;
    }
    h2::before {
      counter-increment: section-h2;
      content: counter(section-h1) "." counter(section-h2) ". ";
    }
    h3::before {
      counter-increment: section-h3;
      content: counter(section-h1) "." counter(section-h2) "." counter(section-h3) ". ";
    }
  </style>
</head>
<body>
  <div>
    <h1>h1 should be 1.</h1>
    <h2>h2 should be 1.1.</h2>
    <h3>h3 should be 1.1.1.</h3>
    <h3>h3 should be 1.1.2.</h3>
  </div>
  <hr style="border: none; height: 2px; background-color: black; width: 100%; margin: 20px auto;"/>
  <div>
      <h2>h2 should be 1.2.</h2>
      <h3>h3 should be 1.2.1.</h3>
      <h3>h3 should be 1.2.2.</h3>
  </div>
  <hr style="border: none; height: 2px; background-color: black; width: 100%; margin: 20px auto;"/>
  <div>
      <h3>h3 should be 1.2.3.</h3>
      <h3>h3 should be 1.2.4.</h3>
      <h3>h3 should be 1.2.5.</h3>
  </div>
  <hr style="border: none; height: 2px; background-color: black; width: 100%; margin: 20px auto;"/>
  <div>
      <h3>h3 should be 1.2.6.</h3>
      <h2>h2 should be 1.3.</h2>
      <h3>h3 should be 1.3.1.</h3>
  </div>
  <hr style="border: none; height: 2px; background-color: black; width: 100%; margin: 20px auto;"/>
  <div>
      <h3>h3 should be 1.3.2.</h3>
      <h2>h2 should be 1.4.</h2>
      <h3>h3 should be 1.4.1.</h3>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode

I get this on Firefox:

Image description

and I get this on Chromium:

Image description

neither is the desired outcome.

Can you help me understand what's going on?
Is there any way to debug on the two platforms?
How can I achieve the desired result on both platforms?

Regards

Max