Blog: Web Design
CLose up of HTML

Ordered Lists With A Different Color For Numbers

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

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.

      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.

      Mozilla Developer Network website

      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:

      • 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 :before pseudo-class with the content property 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 left property to position the numbers as the browser would normally do on it’s own. (You may need to experiment with these values, depending on what font-size you are using.
      Avatar for John Locke

      John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

    2 comments on “Ordered Lists With A Different Color For Numbers

    1. 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

    2. Hi Melinda:

      Yes, the left: -32px controls 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.

    Join the Conversation

    Your email address will be kept private. Required fields marked *.