Learn to count with CSS

Default avatar.
May 17, 2013
Learn to count with CSS.

thumbnailHidden away in the depths of the CSS specification you’ll find CSS counters. As the name suggests they allows you to count a thing on your page with CSS incrementing the value every time it appears on the document.

This is principally useful if you have a tutorial website — whether that be about cooking or web development — they all have steps to follow, and you’ll most likely have to write the step number before the actual content. CSS counters can help by doing that automatically, you can even use it to count the images on your file and add figure numbers before captions.

In this example I will be demonstrating how to achieve this by creating a simple recipe for pancakes and making CSS search for the beginning of each paragraph and adding the number of the step before it.

The HTML

<section>
	<p>Place the flour in a large bowl, make a well in the centre and pour in the milk and eggs. Give the liquid mixture a quick whisk before incorporating the flour. Continue to whisk until you have a smooth batter.</p>
	<p>Now add 1 tbsp vegetable oil and whisk thoroughly.</p>
	<p>Take a crêpe pan, or large frying pan, dip some kitchen roll in the oil and carefully wipe the inside of the pan. Heat the pan over a medium heat for one minute.</p>
	<p>Add just under a ladleful of batter to the pan and immediately start swirling it around the pan to produce a nice even layer.</p>
	<p>Cook the pancake for approximately 30-40 seconds. Use a palette knife to lift the pancake carefully to look at the underside to check it is golden-brown before turning over. Cook the other side for approx 30-40 seconds and transfer to a serving plate.</p>
</section>

The objective in this HTML is that each paragraph is a different step and with CSS we can add those dynamically by writing as little as 3 lines of code.

The CSS

CSS counters use the property counter-increment. It has been around for a while it was actually implemented in CSS 2.1, to use it we must first reset the counter’s default value to 0 before anything we want to count shows up on the page, so it’s a good idea to define this in the body styles, like so:

body {
 counter-reset: steps; 
}

This line just sets the counter back to 0 and it also names it, allowing us to later call it and also allowing us to have more than one counter on the page.

The next step is to use the pseudo element :before to target all the paragraphs and add the step number before all the text begins. To do that we need to use counter-increment, then specify the content. We can just use the number or we can append or prepend some text , in this case we’ll prepend Step ” before the counter’s value, like so:

p:before {
 counter-increment: steps; 
 content: "Step " counter(steps) ": ";
}

We should also make this content stand out a little and to do that we’ll give it a bigger font-size than the paragraphs and make it bold:

p {
 color: #242424;
 font-family: arial, sans-serif;
 font-size: 16px;
 line-height: 20px;
}

p:before {
 counter-increment: steps; 
 content: "Step " counter(steps) ": ";
 font-weight: bold;
 font-size: 18px;
}

If you want to see this idea in action, you can see the pen I created.

Browser support

A constant concern when working with CSS is the browser support, but since this is a CSS 2.1 implementation the browser support is great: it’s supported by all major browsers, desktop and mobile , the only significant browser that doesn’t support it is IE7, and according to my stat counter IE7 is used by only 0.61% of people so I think we can say that IE7 will be departing soon. Whether or not you need to support IE7 is dependent on the stats of your own site.

Conclusion

CSS counters is not something that you will use in every project but it’s something that you should keep in the back of your mind because someday it may come in handy.

Have you used CSS counters in a project? What uses can you see for them? Let us know in the comments.

Featured image/​thumbnail, counting image via Shutterstock.

Sara Vieira

Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/​CSS3 and jQuery. You can follow her on twitter or check out her website.

Read Next

Apple Opts for AR over VR at WWDC

An Apple VR headset has been one of the most widely-rumored devices of the last few years, and it was finally settled a…

Exciting New Tools for Designers, June 2023

We’re halfway through 2023 already, and the number of incredible apps, tools, and resources for designers is mounting.

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…