Using Different List Styles

Taylor Sloane Updated by Taylor Sloane

Our default list schema is numbers > lowercase letters > lowercase Roman numerals. They look a little like this:

  1. Top level
    1. Second level
      1. Third level

If that's not really your thing, you can override our defaults with a little CSS.

Changing List Styles

There's a few different list styles you can choose by applying some custom CSS. Here's a few examples

You'll need to paste all your CSS into the custom CSS box in Settings.
#article ol > li:before { /* Target top level list */
content: counter(li, lower-alpha) !important; /* Use lowercase letters */
}
#article ol ol > li:before { /* Target second level list */
content: counter(li, armenian) !important; /* Use Armenian letters */
}
#article ol ol ol > li:before { /* Target third level list */
content: counter(li, lower-greek) !important; /* Use lowercase greek letters */
}

Here's a list of the available list-style-type values you can choose from:

  • disc (• • •)
  • circle (○ ○ ○)
  • square (▪ ▪ ▪)
  • decimal (1 2 3)
  • decimal-leading-zero (01, 02, 03)
  • lower-roman (i ii iii)
  • upper-roman (I II III)
  • lower-greek (α β γ)
  • lower-latin (a b c)
  • upper-latin (A B C)
  • armenian (Ա Բ Գ)
  • georgian (ა ბ გ)
  • lower-alpha (a b c)
  • upper-alpha (A B C)

What did you think of this doc?

Disabling Top Articles

Using HelpDocs with RTL Languages

Get in touch

This site is protected by hCaptcha and its Privacy Policy and Terms of Service apply.