
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.
See the Pen Turn div elements into numbers with CSS only by WebMadeWell (@webmadewell) on CodePen.