Getting Fancy with Lists

Last Updated July 13, 2016

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.

Unordered List

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

  1. Item 1
  2. Item 2
  3. 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>

Styling the text

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

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

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

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

We’re actually going to hide the default number and create our own counter.

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 and apply our counter:

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;

You’ll notice ordered-list referenced in the content and counter-increment properties.

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

See the Pen Fancy Lists by Amy Dutton (@ahaywood) on CodePen.

The Conversation