Format numbered list spacing and borders

If you are using numbered lists to outline steps, you can adjust the formatting of your lists using some simple CSS. Adjusting these styles can help you consistently format lists with the same spacing and borders across your entire knowledge base. This can keep your content more consistent and help keep your knowledge base content matching official branding/style guidelines.

Adjust spacing and add a border between steps

This sample code which will add spacing and a border between your numbered 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:

   .hg-article-page 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 */
   }
   
   .hg-article-page ol {
     margin-top: 2em; /*adds space between the start of the list and the text above it */
   }

   Here's a sample of what that looks like:
   Sample code to customize list spacing entered in Settings > Style, Custom CSS

4. Click Save.

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

And after you applied it: