如何自定义有序列表中的数字？

如何在有序列表中左对齐数字？

1.  an item
// skip some items for brevity 
9.  another item
10. notice the 1 is under the 9, and the item contents also line up

更改有序列表中的数字后面的字符？

1) an item

还有一个CSS解决方案,可以从数字更改为字母/罗马列表,而不是使用ol元素上的type属性.

我最感兴趣的是适用于Firefox 3的答案.

这是我在Firefox 3,Opera和Google Chrome中使用的解决方案.该列表仍显示在IE7中(但没有关闭括号和左对齐数字):

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

  
One
  
Two
  
Three
  
Four
  
Five
  
Six
  
Seven
  
Eight
  
Nine
Items
  
Ten
Items

li {
    list-style-type: decimal;
    list-style-position: inside;
}

ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }

ol {
  list-style: none;
}

ol>li:before {
  content: attr(seq) ". ";
}

  
Item one
  
Item twenty
  
Item three hundred

  
One
  
Two
  
Three
  
Four
  
Five
  
Six
  
Seven
  
Eight
  
Nine
  
Ten

li:before {
  content: counter(item) ") ";
  counter-increment: item;
  display: marker;
  width: 2em;
}

ol { list-style-type: decimal-leading-zero; }