Traditional lists via the <ul>, <ol>, <dl> tags aren't too versatile when it comes to styling the markers. Sometimes, we have to rely on extra markup to accomplish some minimal custom styling.
CSS counters, on the other hand, take styling lists (or any element for that matter) to a whole new level of customization and styling.
Granted, CSS counters rely not only on the properties we're going to see next, but also on the content property and the :before pseudo-element.
Let's check out the properties that make CSS counters so great.
The
counter-reset CSS property resets the counter by giving it a name, and it looks like this:
counter-reset: basic-counter;