Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Use CSS Counters to Create Pure CSS Dynamic Lists


    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.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    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.