Confession: I like lists, of all shapes and sizes. I especially like ones that look clean. My problem with lists is the styling complications. If I want to style the bullets in an unordered list, or the numbers in an ordered one, there is no simple way of doing this without effecting the list content. These are a couple solutions, conveniently in list form; If you have any suggestions please let me know.

Option 1: Spans

  1. If you inspect this list, you can see each list item is wrapped in a span tag.
  2. I style the list itself however I need. Then…
  3. I style the child spans. This overwrites the parent styles, giving me a list with numbers that have a bit of flair.
  4. Checkout the styles below.

CSS

ol, ul {
  color: #E34A28;
}
ol span, ul span {
  color: #585753;
}

Now, there are some pros and cons to this. It’s some pretty simple CSS, but we also have to add markup into the list items, which is pretty dumb, and a bit unwieldy, especially in a dynamic environment, like a WordPress blog. It is very little CSS, however, and I do like that part. This also works well for both ordered and unordered lists. I’m using this approach currently on this site, and had to run a SQL statement just add the markup into the old posts!

SQL

UPDATE wp_posts SET post_content = REPLACE (
post_content,
'<li>',
'<li><span>') WHERE `post_type` = 'post'

UPDATE wp_posts SET post_content = REPLACE (
post_content,
'</li>',
'</span></li>') WHERE `post_type` = 'post';

Finally, I used a plugin for making the addition of these li-span hybrids a bit easier, called AddQuickTag. This plugin is pretty amazing for any tags you will be repeatedly adding to posts; I highly recommend it.

Option 2: Pseudo Elements

This is definitely the cooler option of the two, even though there is a bit more CSS involved. Rather than wrapping the list items in spans to style them, we will use generated content in pseudo elements.

CSS

ol {
    counter-reset: li;
    margin-left: 0;
    padding-left: 0;
}
ol > li {
    position: relative;
    margin-left: 2em;
    list-style: none;
    color: #585753;
}
ol > li:before {
    content: counter(li);
    counter-increment: li;
    position:absolute;
    top: -.25em;
    left: -2em;
    width: 2em;
    color: #E34A28;
}

As you can see, we are doing a few odd things here. First, we are using CSS counters. This is the secret sauce in this approach. First, we reset the counter, then set a before pseudo element with the counter content. We finally set the counter-increment to the li items, as that is what we are counting. This will give us some generated numbers. Then we just need to disable the out of the box numbering via list-style, and we are all good to go. Some simple positioning and we have fully customizable numbering, independent from our list item content. There is a pretty awesome post on 456 Berea St covering this topic a bit more in depth if you’re interested.

Once again, we’ve got ups and downs here, in my opinion. You probably noticed that this only really helps for ordered lists; You could do the same for unordered, and you wouldn’t even need a counter. You could slap any glyph you like in the content. You also don’t need any extra html markup, which is pretty nice. The downside is the amount of code. What’s a couple more lines of CSS in the days of minification though?

Hope this helps you make a clear decision on how to best style your lists in the future, because lists are awesome!