Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get CSS content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Use CSS Counters to Create Pure CSS Dynamic Lists

1:19 CSS lesson by

CSS counters let you create dynamic lists without JavaScript. In this lesson, we will create a multi-level table of contents using the CSS counter-reset and counter-increment properties with the counter attribute.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

CSS counters let you create dynamic lists without JavaScript. In this lesson, we will create a multi-level table of contents using the CSS counter-reset and counter-increment properties with the counter attribute.

Here we have an unordered list. We're going to remove the default list style and set the counter reset attribute to "chapter" since these are representing book chapters. Let's create a before element on each list item. We'll implement the chapter counter by setting the counter increment attribute to "chapter."

We want to set the content attribute to the before element to what we want displayed. That is the current value of chapter and a period. If we change the content attribute, we can make this much more than an ordered list.

Let's start with chapter and put a colon at the end. What if we add nested lists? We'll need to add another counter reset targeting our nested list. We'll call this counter reset "section." Then we're going to add another before element with its own counter increment and content attribute.

Here we'll set the counter increment to "section" and then change the content attribute to "section." Then a reference to counter section, followed by a colon. Since this is just CSS, let's paste in some styles to make it look better.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?