Using Different List Styles

Updated 3 months ago ​by Jake Peters

You'll need to paste all your CSS into the custom CSS box in Settings

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. Here's some examples:

#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 top 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)

How did we do?