How can you customize the numbers in an ordered list?

Just how can I left - straighten the numbers in a gotten checklist?

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

Change the personality after the number in a gotten checklist?

1) an item

Also exists a CSS remedy to transform from numbers to alphabetic/roman checklists as opposed to making use of the type feature on the ol component.

I am primarily curious about solutions that work with Firefox 3.

2019-05-23 03:38:00
Source Share
Answers: 4

The numbers align much better if you add leading - absolutely nos to the numbers, by establishing list-style-type to:

ol { list-style-type: decimal-leading-zero; }
2022-06-05 17:25:02

I recommend having fun with the :in the past feature and also seeing what you can attain with it. It will certainly suggest your code actually is restricted to wonderful new browsers, and also leaves out the (aggravatingly huge) area of the marketplace still making use of rubbish old browsers,

Something like the adhering to, which compels a taken care of with on the things. Yes, I recognize it is much less classy to need to pick the size on your own, yet making use of CSS for your format resembles covert cops job : nonetheless excellent your objectives, it constantly obtains unpleasant.

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

But you are mosting likely to need to experiment to locate the specific remedy.

2019-12-05 01:25:50

There is the Type attribute which permits you to transform the numbering design, nonetheless, you can not transform the period after the number/letter.

<ol type="a">
    <li>Turn left on Maple Street</li>
    <li>Turn right on Clover Court</li>
2019-05-30 08:13:26

The CSS for styling checklists is here, yet is primarily:

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

However, the details format you desire can possibly just be attained by diving right into the vital organs of the format with something like this (note that I have not in fact attempted it):

ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }
2019-05-30 07:23:53