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