Custom ordered list format

Question

I tried to use ordered list <ol> and each list item <li> outputs as 1. 2. 3. ... etc, I want the output to be 1) 2) 3) ... etc, can this be done?

score 10 · Accepted Answer · edited Jul 13 '11 at 18:01

10

You can, but only with the more up-to-date browsers (Chrome, Safari, Firefox and Opera will work):

ol {
  counter-reset: listCounter;
}
ol li {
  counter-increment: listCounter;
}
ol li:before {
  content: counter(listCounter) ")";
}

edited Jul 13 '11 at 18:01

mazlix

answered Dec 08 '10 at 14:59

David Thomas

@FDisk: yes, did you read the first sentence? I imagine (though I don't have access in order to test) that it *should* work on IE 10 and, *possibly*, IE 9. – David Thomas Dec 19 '12 at 10:44

Klaster_1 Нет войне · Answer 2 · 2016-11-27T08:21:03.147

2

You can do this with CSS counter and pseudo elements:

ol li{
    list-style: none;
    counter-increment: myIndex;
}

ol li:before{
    content:counter(myIndex)") ";
}

<ol>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ol>

edited Nov 27 '16 at 08:21

answered Dec 08 '10 at 14:52

+1 for an answer I agree with, posted ahead of me (answering via iPhone takes so much time...). Had you posted your demo/example CSS *here* I'd've probably deleted my own, so very tardy, answer in deference to yours. – David Thomas Dec 08 '10 at 16:09
Thanks, I'll consider that in future answers. – Klaster_1 Нет войне Dec 08 '10 at 16:21

score 0 · Answer 3 · answered Dec 08 '10 at 14:42

0

No, the valid options are listed >here<.

answered Dec 08 '10 at 14:42

TToni

3 Answers3