Make Your Numbered Lists Look Pretty and Modern!
The standard HTML numbered lists are a bit boring, but here's an easy way to spruce them up.
I've noticed a trend recently in printed publications to use large drop cap style numbers in lists to add a bit of interest and to generally modernise things a bit.
Of course, we have numbered lists (OL, ordered lists) in HTML and although they are numbered automatically which makes editing them easier, it does mean that we are limited in styling the numbers as they pick up font attributes from the main text (standard example below).
- This is a normal ordered list
- It looks a bit boring doesn't it?
- Let's see if we can do a bit better
We can however, use some CSS and not only have custom styling for the numbers but we can also keep the automatic numbering!
We're using CSS counters for the numbers which is a widely supported but little known feature of old CSS. A CSS counter is a very basic incrementing variable that doesn't involve Javascript.
Here is the CSS and HTML code involved. If you want to style all your site's OL like this, you can drop the classname of "big" and just style the OL tag directly.
CSS
ol.big {
list-style-type: none;
margin: 30px 0;
counter-reset: olCounter;
}
ol.big li {
font-size: 18px;
margin-bottom: 20px;
counter-increment: olCounter;
list-style-type: none;
}
ol.big li:before {
content: counter(olCounter) '.';
color: orange;
line-height: 46px;
font-size: 50px;
float: left;
padding-right: 10px;
position: relative;
top: 1px;
}HTML
<ol class="big">
<li>Your content here</li>
<li>Your content here</li>
...
</ol>RESULT
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eleifend porttitor purus in tincidunt. Nam ac ante urna. Cras nec turpis velit. Quisque convallis quam facilisis neque faucibus id consectetur odio convallis. Vestibulum at justo lectus.
- Vestibulum suscipit, quam nec congue fermentum, risus ante tempus risus, eget consequat nisi turpis at tortor. Ut condimentum diam nec velit tempus id pharetra lacus euismod.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eleifend porttitor purus in tincidunt. Nam ac ante urna. Cras nec turpis velit. Quisque convallis quam facilisis neque faucibus id consectetur odio convallis. Vestibulum at justo lectus.
Note the full stop after the number which we added within the content parameter. We could also use a completely different font here if we wanted, unlike the standard ordered list items.
You can use CSS counters anywhere, not just lists. Just ensure that the counter-increment is attached to the correct element. The counter value can only be displayed with the content parameter which means it must be within a before or after pseudo element.
Counters normally starts at 1. To start at 0, move
counter-increment: olCounter;from it's current position to:
ol.big li:after { counter-increment: olCounter; }so it only get's incremented AFTER each LI rather than just before.
The font size, line-height and positioning here seemed to be the best that worked across PC, ios, Android and even IE10! This example uses Open Sans, a Google webfont.
The only drawback to this is that the font rendering between PC and Mac (incl. ios) can be quite different depending on the font, so something like this that relies on precise positioning will need extra testing. You might need to compromise a bit on the line-height and font size. (Android seems closer to PC in my testing).
I'm going to use this in an upcoming site I'm working on to make the how-to instruction steps look a bit more appealing and easier to follow.