CSS list-style-type: Alphabets and Roman Numerals

The CSS list-style-type property allows web developers to customize the markers used in HTML lists by replacing standard numbers or bullet points with predefined styles. By applying specific keywords to an ordered list (<ol>) or individual list items (<li>), you can format list markers into uppercase or lowercase Roman numerals, standard Latin alphabets, or regional character sets. This guide covers the syntax, predefined keyword values for Roman numerals and alphabetic markers, and how to define custom alphabets.

Understanding list-style-type Syntax

The list-style-type property is typically applied to the parent <ol> element or directly to target <li> elements. When set on an ordered list, it overrides the default browser counter style (standard decimal numbers).

ol {
  list-style-type: lower-roman;
}

Implementing Roman Numerals

CSS provides two built-in keywords to format lists with Roman numerals:

• upper-roman: Renders uppercase Roman numerals (I, II, III, IV, V, etc.).
• lower-roman: Renders lowercase Roman numerals (i, ii, iii, iv, v, etc.).

Example

/* Uppercase Roman Numerals */
.legal-outline {
  list-style-type: upper-roman;
}

/* Lowercase Roman Numerals */
.sub-section {
  list-style-type: lower-roman;
}

Implementing Alphabetic Markers

CSS provides several keyword values for alphabetic lists based on standard Latin characters and other linguistic scripts:

• lower-alpha or lower-latin: Formats markers as lowercase letters (a, b, c, etc.).
• upper-alpha or upper-latin: Formats markers as uppercase letters (A, B, C, etc.).
• lower-greek: Formats markers as lowercase classical Greek letters (α, β, γ, etc.).

Example

/* Uppercase Alphabet */
.steps-list {
  list-style-type: upper-alpha;
}

/* Lowercase Alphabet */
.nested-questions {
  list-style-type: lower-alpha;
}

Creating Custom Alphabets with @counter-style

While list-style-type includes many built-in keywords, you can create entirely custom alphabetic sequences using the CSS @counter-style at-rule. Once defined, the custom counter name is passed directly to the list-style-type property.

@counter-style custom-alphabet {
  system: alphabetic;
  symbols: 'A' 'B' 'C' 'D';
  suffix: ") ";
}

ol.custom-list {
  list-style-type: custom-alphabet;
}

In this setup:

• The system: alphabetic descriptor tells the browser to cycle through the symbols using standard alphabetic numbering (A, B, C, D, AA, AB, etc.).
• The symbols descriptor specifies the exact characters to use in order.
• The suffix descriptor defines the punctuation or spacing that appears directly after the marker.