How Can I Customize Ordered List Numbering?

Customizing Ordered List Numbering

Question: How can an ordered list be customized to alter the alignment of numbers, modify the character after the number, and switch from numerical to alphabetical/roman notation?

Left-align Numbers:

To left-align the numbers in an ordered list, utilize CSS as follows:

ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}
li {
  display: block;
  margin-bottom: .5em;
  margin-left: 2em;
}
li::before {
  display: inline-block;
  content: counter(item) ") ";
  counter-increment: item;
  width: 2em;
  margin-left: -2em;
}

Custom Numbering Character:

To change the character after the number, modify the content property in the CSS above. For example, change it to ".) " for periods:

content: counter(item) ".) ";

Switching to Alphabetic/Roman Notation:

To switch from numbers to alphabetic/roman lists, use the type attribute on the ol element:

• type="a" for lowercase alphabetic notation
• type="A" for uppercase alphabetic notation
• type="i" for lowercase roman notation
• type="I" for uppercase roman notation

Compatibility:

The CSS solution provided is compatible with Firefox 3, Google Chrome, and Opera. However, it may not work completely in IE7.

The above is the detailed content of How Can I Customize Ordered List Numbering?. For more information, please follow other related articles on the PHP Chinese website!