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.
[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.
Counters are great :) The only downside is that putting data in the content property is not always accessible, so we only should generate content via CSS that is not essential for the user. Otherwise, some screen readers won't read the CSS generated content.