Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Use CSS Counters to Create Pure CSS Dynamic Lists

    Greg ThomanGreg Thoman

    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.

    cssCSS
    Code

    Code

    Become a Member to view code

    You must be a 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
    Transcript

    Transcript

    00:00 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."

    00:23 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.

    00:37 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.

    00:59 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.

    Discuss

    Discuss