How Can I Customize Ordered Lists in Firefox 3 (and Beyond)?

Customizing Ordered Lists in Firefox 3

Left-Aligning List Numbers

To left-align the numbers in an ordered list, you can use CSS to override the default styling:

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;
}

Changing Character After List Numbers

To change the character after the list number, modify the content property in the li::before rule:

li::before {
  ...
  content: counter(item) "a) ";
  ...
}

Converting to Alphabetic/Roman Lists

To convert from numbers to alphabetic or roman lists using CSS, use a combination of counter-reset, counters() function, and content property:

ol {
  list-style-type: none;
  counter-reset: my-counter;
}

li {
  display: block;
  counter-increment: my-counter;
}

li::before {
  content: counters(my-counter, lower-alpha) ". ";
  ...
}

For Roman numerals:

li::before {
  content: counters(my-counter, lower-roman) ". ";
  ...
}

Note that this technique may not work in older browsers, including Internet Explorer 7.

The above is the detailed content of How Can I Customize Ordered Lists in Firefox 3 (and Beyond)?. For more information, please follow other related articles on the PHP Chinese website!