Format Numbered Lists

If you are using numbered lists to outline steps, you can adjust the formatting of your lists using some simple CSS.

Adjust spacing and add a border between steps

This sample code which will add spacing and a border between your steps. Customize it to get the list format you've always wanted!

1. Go to Settings > Style.
2. Scroll down to Custom CSS.
3. Paste the following code into the CSS (insert the Articles merge code with the merge code helper):

   ol li {
     margin-bottom: 2em; /*adds space between the text of this list item and the border */
     border-bottom: 1px solid #ccc; /*adds a border below the list item/step */
     padding-bottom: 2em; /*adds space between the border and the next list item/step */
   }
   ol {
     margin-top:2em; /*adds space between the start of the list and the text above it */
   }

   
4. Click Save.

Here is what your lists might look like before you applied this change:

And after you applied it: