Ordered Lists With A Different Color For Numbers
In HTML, there are two types of lists: ordered and unordered (ol and ul).
Ordered lists have numbers for each list-item (li), while unordered lists do not have numbers.
Unordered lists are generally used for many different things, like site navigation, widgets with links, bullet-point lists, or any place a set of links might show up.
Ordered lists are usually used in body content, like in the middle of a blog post.
Here’s a peculiar issue. What if you wanted to make the numbers in your ordered list a different color than the rest of the list? Like if you wanted black text, but with red numbers, for example?
Is it even possible to use ordered lists, but give the numbers a different color?
I’m not advocating you do this on a regular basis, but here’s how you would accomplish this.
First the code, then the explanation of what’s happening.
/* Tell the to not display numbers, but keep track of what the numbers should be */
ol li {
counter-increment: list;
list-style-type: none;
position: relative;
}
/* Output the numbers using the counter() function, but use a custom color, and position the numbers how we want */
ol li:before {
color: #e75204;
content: counter(list) ".";
left: -32px;
position: absolute;
text-align: right;
width: 26px;
}
/* Feel free to adjust the values for Color, Left, and Width as necessary */
You can see a working version of it here on Codepen:
See the Pen Different colored numbers than text on ordered list
- by John J. Locke (@johnjlocke) on CodePen.
- Keep track of the ordered list-items as you normally would.
- Instead of relying on the browser’s internal function, we want to use the
:beforepseudo-class with thecontentproperty to output the number and a period. (The browser normally does this — why are we re-declaring it?) - Instead of using the default text color for that list-item for the numbers, use the color we’ve specified instead. (Here’s where the magic happens.)
- Use absolute positioning and the
leftproperty to position the numbers as the browser would normally do on it’s own. (You may need to experiment with these values, depending on whatfont-sizeyou are using.
How This Works
CSS counters have actually been supported by all major browsers for many years, as far back as IE8. The counter property is an internal variable in CSS, that keeps track of certain counting functions, like automatically counting list-items.
CSS counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they’re used. This lets you adjust the appearance of content based on its placement in the document. CSS counters are an implementation of Automatic counters and numbering in CSS 2.1.
The counter-increment property keeps track of the id number of the items that are being counted, and defaults to starting at 0. In this case, it is counting our list-items.
To use counter-increment to override the normal browser function, we have to use the counter() function. We see this in our second CSS declaration block.
In that second CSS decalaration, we are basically saying the following things to the browser:
I have always wanted to try something like this, but have never gotten around to implementing it. Just to make sure I’m understand this fully…
When you have
left: -32px;that’s the positioning of the colored item…correct?TIA
Hi Melinda:
Yes, the
left: -32pxcontrols where the colored number sits. Normally, your browser will have it’s own default styles for where the numbers sit. Each browser is slightly different.But what this does is remove the normal number in an ordered list, and replace it with your new numbering, which you are giving a specific color.
The default behavior of each browser is to just output the numbers in an ordered list, but use the default color set to that list-item (usually whatever color the body text is set to).
The reason this is tricky is in the default behavior of the browser, there is no HTML markup to target the numbers in an ordered list without also targeting the rest of the list-item.
If you click the Codpen example where it says, “Edit on Codepen”, you will go to an example where you can edit that line of CSS and see how it affects the displayed text on the page as you change it.