How To Make Numbered Lists Look Amazing in WordPress

After writing my blog post on 5 reasons to use lists in blogs, I had people email me asking how I made my lists look so good. I’ll admit, before that post my lists looked ugly. But I spent quite a bit of time playing around to get it to look that way.

What I ended up coming across was some css tricks that let you do numbering in different styles. I had to modify it to work with the lists I was making. First, I’ll give you the code to put into your theme’s custom.css file:

.fancy {
    counter-reset: fancy-counter;
    list-style: none;
}

.fancy li:before {
    content: counter(fancy-counter);
    counter-increment: fancy-counter;
    left: -40px;
    position: relative;
    top: 25px;
    font: bold 50px/1 Sans-Serif;
}

.fancy strong {
    margin-left: -30px;
}

Once this is in your theme’s custom.css file, you can create a new numbered list with WordPress just like you always have, with two exceptions:

  1. You must use the bold tag at the begging of each section. As you can see in the css above, strong (which is what WordPress uses for bolding), has a margin that is being offset by 30 pixels. This is to counter the space the numbers take up.
  2. You must add the fancy class to the <ol> tag. This can be done by changing your WordPress Visual Editor from Visual to Text mode. Change the <ol> to <ol class=”fancy”>. This prevents lists outside of your content from getting changed, ensuring your blog doesn’t break.

That’s all there is to it. Seems complicated at first but once you get it figured out it really doesn’t add much to your flow when creating new posts. But it has an amazingly beautiful effect that’ll help your blog look that much better.

18 thoughts to “How To Make Numbered Lists Look Amazing in WordPress”

  1. If anyone isn’t that experienced with HTML and CSS, then a simple way of applying this might be to install a custom CSS plugin (I use Custom CSS – Whole Site and Per Post on some sites and it works well) and then adding the code there. It saves modifying the WordPress theme.

  2. This is such a great tutorial. Love it!

    I could not get it to work on my Elegant Theme – but jiggled some and adapted the CSS code for the first part and added a color font option. I placed the code in the DIVI Additional CSS under Customize.

    ol li {
    counter-increment: list;
    list-style-type: none;
    position: relative;
    }

    .fancy {
    counter-reset:fancy-counter;
    list-style-type:none
    }

    .fancy li:before {
    content: counter(fancy-counter);
    counter-increment: fancy-counter;
    left: -50px;
    position: relative;
    top: 25px;
    font: bold 60px/1 Sans-Serif;
    color: #bdc3fb;
    }

    .fancy strong {
    margin-left: -30px;
    }

  3. Bu the number and/or bullet point still appears from the existing list. So I get first the large number and then the same number in normal size from the existing CSS. How do I make this completely remove the double text please?

  4. I getting stuck to try numbering list on post or page on my wordpress. Every i hit enter they’re always continue or always be number 1. Hope this article help me, thanks!

  5. Nothing happens, i have the custom.css file updated in divi theme and the ol class referred to in the visual text editor, is there a step i am missing?

Leave a Reply

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