Hopefully by now you have all read my blog on styling a select box. Well today I’m going to show you how to style an unordered list.
The Problem
Surprisingly, CSS doesn’t provide a straight forward way of styling unordered lists. There isn’t any CSS for changing
the colour of a bullet and the list style options are limited to disc, circle and square.
While there are plenty of ways to get around the limitations mentioned above, these often involve the use of background
images or spans. The problem with background images is they don’t scale well responsively and spans need to be added
into the HTML each time a <ul> is used. This is not ideal if the client is using a CMS and adding content to their
site, as they will have to add the spans into the HTML themselves (or pay you to do it!)
The Solution
A nice clean way to style an unordered list is to take advantage of the CSS ::before selector.
Below is your standard HTML for an unordered list. Note that when I apply CSS to the <ul> I only want to
apply it to <ul>’s in the content area of the website. I don’t want to apply it to <ul>’s used for
menus etc.
<div class=”content-area-container”>
<ul>
<li>Limelight Online – getting it right from the start</li>
<li>Limelight Online – results oriented</li>
<li>Limelight Online – focus on quality</li>
<li>Limelight Online – on time delivery</li>
</ul>
</div>
As you can see, there is nothing special going on here. All the magic happens in the CSS.
First I need to hide the default bullet and add some padding for where my new bullet is going to go.
.content-area-container ul {
margin: 0;
padding: 0 0 0 20px;
list-style: none;
}
Next I need to make sure my
<li>is position relative so I can better position my new bullet.
.content-area-container ul li {
position: relative;
font-size: 13px;
line-height: 20px;
}
Finally I create my new bullet using the ::before selector.
For a bullet, I set content to nothing and use border radius to create a round
bullet point.
.content-area-container ul li:before {
position: absolute;
background-color: #b61717;
width: 5px;
height: 5px;
border-radius: 50%;
content: “”;
left: -12px;
top: 8px;
}
If I wanted to change my list style to a plus sign, I can make the following
tweaks to my CSS:
.content-area-container ul li:before {
position:absolute;
color: #b61717;
content:”+”;
left: -15px;
top: 0;
}
Taking it to the next level!
If you want to create some really cool list styles I suggest using the iconic
font and CSS toolkit called Font Awesome. Basically Font Awesome allows you to
add scalable vector icons as you list style. If you want to learn more about
this tool, please visit the FontAwesome website.
I’ll show you what it can do.
Let’s say I want a ‘thumbs up’ as my bullet list style:
All I need to do is set content to equal the CSS Rule for the thumbs up icon and
set font-family to be FontAwesome. All the different CSS Rules for the different
icons can be found here.
.content-area-container ul li:before {
position:absolute;
color: #b61717;
content:”f164”;
left: -20px;
font-family: FontAwesome;
top: 0;
}
And there you have it, a nice clean solution to not only change the colour of an unordered list, but change the list style to something custom.
Hope you found this tutorial useful! Feel free to ask any questions in the comments area below. And stay tuned for my next installment!