Styling Counters in CSS
Going from the most basic ways to style lists directly in HTML to advanced customization techniques that are even capable of making things that aren't lists look like lists. Styling Counters in CSS originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
Yes, you are reading that correctly: This is indeed a guide to styling counters with CSS. Some of you are cheering, “Finally!”, but I understand that the vast majority of you are thinking, “Um, it’s just styling lists.” If you are part of the second group, I get it. Before learning and writing more and more about counters, I thought the same thing. Now I am part of the first group, and by the end of this guide, I hope you join me there.
There are many ways to create and style counters, which is why I wanted to write this guide and also how I plan to organize it: going from the most basic styling to the top-notch level of customization, sprinkling in between some sections about spacing and accessibility. It isn’t necessary to read the guide in order — each section should stand by itself, so feel free to jump to any part and start reading.
Customizing Counters in HTML
Lists elements were among the first 18 tags that made up HTML. Their representation wasn’t defined yet but deemed fitting a bulleted list for unordered lists, and a sequence of numbered paragraphs for an ordered list.
Cool but not enough; soon people needed more from HTML alone and new list attributes were added throughout the years to fill in the gaps.
start
The start attribute takes an integer and sets from where the list should start:
- Bread
- Milk
- Butter
- Apples
- Bread
- Milk
- Butter
- Apples
Although, it isn’t limited to positive values; zero and negative integers are allowed as well:
- Bread
- Milk
- Butter
- Apples
- Bread
- Milk
- Butter
- Apples
- Bread
- Milk
- Butter
- Apples
- Bread
- Milk
- Butter
- Apples
type
We can use the type attribute to change the counter’s representation. It’s similar to CSS’s list-style-type, but it has its own limited uses and shouldn’t be used interchangeably*. Its possible values are:
1for decimal numbers (default)afor lowercase alphabeticAfor uppercase alphabeticifor lowercase Roman numbersIfor uppercase Roman numbers
- Bread
- Milk
- Butter
- Apples
- Bread
- Milk
- Butter
- Apples
- Bread
- Milk
- Butter
- Apples
- Bread
- Milk
- Butter
- Apples
It’s weird enough to use type on ol elements, but it still has some use cases*. However, usage with the ul element is downright deprecated.
value
The value attribute sets the value for a specific li element. This also affects the values of the li elements after it.
- Bread
- Milk
- Butter
- Apples
- Bread
- Milk
- Butter
- Apples
reversed
The reversed attribute will start counting elements in reverse order, so from highest to lowest.
- Bread
- Milk
- Butter
- Apples
- Bread
- Milk
- Butter
- Apples
All can be combined
If you ever feel the need, all list attributes can be combined in one (ordered) list.
- Bread
- Milk
- Butter
- Apples
- Bread
- Milk
- Butter
- Apples
* Do we need them if we now have CSS?
Funny enough, the first CSS specification already included list-style-type and other properties to style lists, and it was released before HTML 3.2 — the first HTML spec that included some of the previous list attributes. This means that at least on paper, we had CSS list styling before HTML list attributes, so the answer isn’t as simple as “they were there before CSS.”
Without CSS, a static page (such as this guide) won’t be pretty, but at the very least, it should be readable. For example, the type attribute ensures that styled ordered lists won’t lose their meaning if CSS is missing, which is especially useful in legal or technical documents. Some attributes wouldn’t have a CSS equivalent until years later, including reversed, start and value.
Styling Simple Counters in CSS
For most use cases, styling lists in CSS doesn’t take more than a couple of rules, but even in that brevity, we can find different ways to style the same list.
::marker or ::before?
The ::marker pseudo-element represents the counter part of a list item. As a pseudo-element, we can set its content property to any string to change its counter representation:
li::marker {
content: " Apa Reaksimu?
