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:
IMHO, this gives your content more umph, creating more character and demonstrating your attention to detail.
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:
1
2
3
4
5
<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
1
2
3
4
5
6
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:
1
2
3
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.
1
2
3
4
5
6
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:
1
2
3
4
5
6
7
8
9
10
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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.
Receive a weekly email of the Internet's best from articles, to tutorials, to pro tips.