-
Book Overview & Buying
-
Table Of Contents
Web Developer's Reference Guide
By :
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;
The counter-reset property serves two purposes: resets the counter and defines a name for the counter. The name is later used by the counter-increment and counter()/counters() functions that we'll see later.
I have to admit that the term "counter-reset" isn't as intuitive as it should be if it's...
Change the font size
Change margin width
Change background colour