Fancy Ordered Lists

Published: January 7, 2020

One of the design “tricks” in my hat, I’ve been using quite a bit lately is styling the numbers differently than the rest of the content.

In fact, I’m implementing this technique on this site:

Item 1
Item 2
Item 3

IMHO, this gives your content more umph, creating more character and demonstrating your attention to detail.

Walking through the Code

For this tutorial, let’s style the unordered list from this site.

We’re working with a numbered list, which is perfect for an <ol></ol>. The only difference is that I want to target the numbers, styling them differently than the rest of the text.

Let’s start with what we know. Here’s my HTML:

<ol class="custom-list">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
</ol>

Styling the text:

li {
  border-bottom: 1px solid gray;
  font-size: 20px;
  padding: 15px 15px 20px 120px;
  position: relative;
}

We'll give this a gray bottom border
Increase the font-size to 20px.
Add some padding.

We don’t want a border on the very last item. We can target it by using the last-child selector:

1
2
3

li:last-child {
  border-bottom: none;
}

Now that the easy part is done, let’s style the number.

We’re going to remove the default margin and padding. Then, we'll hide the default number (list-style-type: none;) and create our own counter (counter-reset).

ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
  counter-reset: ordered-list;
}

The value for counter-reset could be anything. Here, I’ve used ordered-list, but it could be: my-awesome-counter, i-am-a-css-master, or whatever. The important thing is to be consistent when we reference it later.

Then, we can use the pseudo-element :before to apply our counter. :before simply injects content before the item we're referencing. In this case, our list item.

li:before {
  color: pink;
  content: counter(ordered-list);
  counter-increment: ordered-list;
  font-family: sans-serif;
  font-size: 38px;
  left: 60px;
  line-height: 38px;
  position: absolute;
}

I want the color of our number to be pink, the font to be sans-serif, and the size to be 38px.
You’ll notice our ordered-list referenced in the content and counter-increment properties.
- content displays the number
- counter-increment increases the value with each list item.
Then, we want to position the number. Positioning is always relative to the parent element. Here, the parent element is the list item. Fortunate for us, we gave the list item a position of relative, up above.

Ta da. Altogether now. Here’s all the CSS in one place:

ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
  counter-reset: ordered-list;
}

li {
  border-bottom: 1px solid gray;
  font-size: 20px;
  padding: 15px 15px 20px 120px;
  position: relative;
}

li:before {
  color: gray;
  content: counter(ordered-list);
  counter-increment: ordered-list;
  font-family: sans-serif;
  font-size: 38px;
  left: 60px;
  line-height: 38px;
  position: absolute;
}

All the code has been posted on GitHub, feel free to download it, fork it, use it modify it, whatever. It's yours.

Or feel free to grab what you need from CodePen:

Comments

This industry moves fast, but you can stay up to date:

Receive a weekly email of the Internet's best from articles, to tutorials, to pro tips.