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.

https://app.egghead.io/api/v1/lessons/css-use-css-counters-to-create-pure-css-dynamic-lists/subtitles

Use CSS Counters to Create Pure CSS Dynamic Lists

[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.

Use CSS Counters to Create Pure CSS Dynamic Lists

Share this video with your friends