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'll give this a gray bottom border
- Increase the
font-sizeto20px. - 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).
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 to apply our counter. :before simply injects content before the item we're referencing. In this case, our list item.
1
2
3
4
5
6
7
8
9
10
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
colorof our number to bepink, the font to besans-serif, and the size to be38px. - You’ll notice our
ordered-listreferenced in thecontentandcounter-incrementproperties.contentdisplays the numbercounter-incrementincreases the value with each list item.
- Then, we want to
positionthe 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 ofrelative, up above.
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.