Turning Div Elements into Numbers

Easy way to turn a series of div elements into a sequence of numbers with a simple CSS rule.

Ever wondered how to have numbers instead of dots for your slider navigation option?

Sliders are usually the first thing you see on most websites. I have used number of different sliders and none of them offered an option to have numbered navigation instead of simple dots below the sliders. I am going to show you how to turn these dots into numbers using a very simple CSS trick.

Let’s mark up the dot elements with HTML first. We need a parent div and a series of child elements, similar to the structure of slider dots.

1
2
3
4
5
6
7

<div class="nav-dots">
  <div class="nav-dot"></div>
  <div class="nav-dot"></div>
  <div class="nav-dot"></div>
  <div class="nav-dot"></div>
  <div class="nav-dot"></div>
</div>

We have 5 dots in this example. Stylise the parent item with CSS, and input ‘counter-reset’ CSS rule.

1
2
3
4
5

.nav-dots {
  counter-reset: dots;
  text-align:center;
  margin-top:5%;
}

The ‘counter-reset’ CSS rule tells the parent elements to count ‘dots’.
We now stylise the child elements.

6
7
8
9
10

.nav-dots > div {
  display: inline-block;
  margin: 0 12px;
  border-bottom: 2px solid #bbbbbb;
}

We have 5 elements with a ‘border-bottom’ style, but nothing is counted yet.
We need to add ‘dots’ content to the child elements, so they can be counted.

11
12
13
14

.nav-dot::before {
  counter-increment: dots;
  content: counter(dots, decimal-leading-zero);
}

That’s all is required to turn the child elements into a sequence of numbers.
You can see it in action at my CodePen page.