Custom WordPress themes and plugins

Apply Outline Styling To HTML Ordered Lists

CSS Transition Generator

We just worked through a fun question from a client: how to make HTML ordered lists look more like an outline, using numbers, letters, and Roman numerals. We found that we could use a few CSS rules to achieve the result, specifically making use of list-style-type.

CSS Example To Apply Outline Styling To HTML Ordered Lists

/* first level - decimal (1, 2, 3) */
ol {
	list-style-type: decimal;
}
/* second level - upper-alpha (A, B, C) */
ol ol {
	list-style-type: upper-alpha;
}
/* third level - upper-roman (I, II, III) */
ol ol ol {
	list-style-type: upper-roman;
}
/* fourth level - lower-alpha (a, b, c) */
ol ol ol ol {
	list-style-type: lower-alpha;
}
/* fifth level - lower-roman (i, ii, iii) */
ol ol ol ol ol {
	list-style-type: lower-roman;
}

Explanation Of list-style-type

list-style-type is a widely supported CSS property, and affects how an ordered or un-ordered list is displayed. In this case, we are applying new rules as we encounter deeper nested ordered lists. After the fifth level, all further nested lists will be in lower-roman. More specific rules could be added to apply more styling, but in this case it may be better to make new lists as it could be confusing to nest this deeply. It should be easy to modify the above example to change the outline style.

Complete List Of List Style Types

Keep in mind that not all types are supported by all browsers.

Type Description Example
asterisks Asterisks denotes level
  1. One
  2. Two
  3. Three
armenian Traditional Armenian numbering
  1. One
  2. Two
  3. Three
binary Values displayed in binary
  1. One
  2. Two
  3. Three
circle Outline of a circle
  1. One
  2. Two
  3. Three
decimal Values are integers
  1. One
  2. Two
  3. Three
decimal-leading-zero Values are integers with leading zeros
  1. One
  2. Two
  3. Three
disc Filled in circle
  1. One
  2. Two
  3. Three
footnotes Footnote characters
  1. One
  2. Two
  3. Three
georgian Traditional Georgian numbering
  1. One
  2. Two
  3. Three
lower-alpha Lowercase letters, alias of lower-latin
  1. One
  2. Two
  3. Three
lower-greek Lowercase Greek character
  1. One
  2. Two
  3. Three
lower-hexadecimal Hexadecimal with lowercase letters Note:There is no difference between this and decimal until the tenth item
  1. One
  2. Two
  3. Three
lower-latin Lowercase letters, alias of lower-alpha
  1. One
  2. Two
  3. Three
lower-norwegian Lowercase Norwegian letters
  1. One
  2. Two
  3. Three
lower-roman Lowercase Roman numerals
  1. One
  2. Two
  3. Three
none Nothing
  1. One
  2. Two
  3. Three
octal Octal numbers Note:There is no difference between this and decimal until the eighth item
  1. One
  2. Two
  3. Three
square Filled in square
  1. One
  2. Two
  3. Three
upper-alpha Uppercase letters, alias of upper-latin
  1. One
  2. Two
  3. Three
upper-greek Uppercase Greek letters
  1. One
  2. Two
  3. Three
upper-hexadecimal Hexadecimal with uppercase letters Note:There is no difference between this and decimal until the tenth item
  1. One
  2. Two
  3. Three
upper-latin Uppercase Latin letters, alias of upper-alpha
  1. One
  2. Two
  3. Three
upper-norwegian Uppercase Norwegian letters
  1. One
  2. Two
  3. Three
upper-roman Uppercase Roman numerals
  1. One
  2. Two
  3. Three

Check QuirksMode.org for a complete compatibility list regarding all of these options.