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:

If you'd like to apply these kinds of changes to a bulleted list instead of a numbered list, adjust the CSS to apply to ul instead of ol:

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