How to set the li style?

usually I use li to do this:

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

and I style set to this:

ol.d {list-style-type:lower-alpha;}

and the result like this:

a. Coffee
b. Tea
c. Coca Cola开发者_StackOverflow中文版

But I would like to modify in order to make the result like this:

(a) Coffee
(b) Tea
(c) Coca Cola

How can I do so? Thank you.

---

Well you can use the counter-related properties, but they're not well-supported in some browsers (like old versions of IE).

ol.d {
    counter-reset: item;
}

ol.d li:before {
    content: '(' counter(item, lower-alpha) ') ';
    counter-increment: item;
}

Some references:

• jsFiddle preview of above code
• W3C spec on automatic numbering
• SitePoint Reference on CSS generated content

---

Sorry, it's not set in the default CSS for list-style-type. You can refer to https://developer.mozilla.org/en/CSS/list-style-type for what's available via CSS.

---

You can't modify how the list items appear other than using a list image. IF you want to do this you'll have to simulate it with extra markup and margin/positioning trickery.

---

Try it:

ol { counter-reset: item }
li:before { content: "( " counter(item, upper-latin) " ) "; counter-increment: item }