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: