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 . 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:
Styling the text
We don’t want a border on the very last item. We can target it by using the selector:
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.
The value for could be anything. Here, I’ve used , but it could be: , , or . The important thing is to be consistent when we reference it later.
Then, we can use the pseudo element and apply our counter:
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:
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.