Dressing Up HTML Lists with CSS Content

October 8, 2012

Let’s face it, unordered and ordered lists are boring. As web designers, we’ve spent a good bit of time finding ways to make them not look like lists.

But sometimes we DO want them to look like a list. Unfortunately, we’re generally stuck with the discs, circles, numbers, and roman numerals available across browsers. If you’re feeling a bit more adventurous, you might even give that list item a background image and some padding for a custom bullet. But with the introduction of retina displays over the last couple years, those just aren’t looking as great any more.

What if we used some CSS and the content attribute though to add some vector (it’s just a font) bullets?

The HTML

This part is easy; it’s just a list of some kind. It’s quite possible the content management system you’re using is spitting this out for you anyway.

HTML


<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
</ul>

Removing the Default Styles

If you’re not resetting your list styles with something like the Eric Meyer reset or normalize.css, you’ll need to clear a bit of the default margin and padding first.

CSS


ul, ol, ul li, ol li {
padding: 0;
margin: 0;
list-style: none;
}

Adding New Bullet Styles with the CSS “content” Attribute

While browser support will be hit or miss, using the ‘content’ attribute will allow you to use almost any font symbol you desire for a bullet. Let’s add a right arrow (HTML: &rarr;) to our bullet items. Unfortunately, simply adding the HTML equivelent just won’t work. And adding ‘→’ will work for a short period, but repeated saves to the CSS file will eventually degrade to what looks to me like random letters and symbols. For this reason, we will need to use a modified way of writing these symbols. A quick write-up and an expanded explanation of the ‘content’ attribute can be found at CSS-Tricks here. (For a more comprehensive list of choices, check out the W3Schools entity reference.) For our arrow, we will need to use ‘\2192’. We will be adding this as the content of the ‘before’ pseudo-class to place it in front of our text.

CSS


ul li:before, ol li:before {
content: '\2192';
}

Now you should have something that looks like this.

That’s a good start, but what if the list wraps to extra lines? You might end up with something that wraps under the new bullet icon like this:

To solve this problem, we’ll float the arrow to the left and give it a little bit of negative left margin. We’ll also give the list items a little bit of positive left padding to bring everything back over where it should be. Below is the final CSS code for the whole thing.

CSS


ul, ol, ul li, ol li {
padding: 0;
margin: 0;
list-style: none;
}

ul li, ol li {
padding-left: 20px;
}

ul li:before {
content: '\2192';
float: left;
margin-left: -20px; 
}

Wrap Up

There are TONS of different things you can do with this, but since I was using this for a project right now, I figured I’d throw it in here for anyone else that might want to use this technique.

Wanna chat about this article or any others? Feel free to DM me or mention me on Twitter @marcusdburnette to start a conversation!

Leave a Reply

Your email address will not be published. Required fields are marked *