HTML: How to change ordered list item point displays?

Question

I have an <ol> tag (ordered list) in my HTML document. I would like it to display items in the following format:

(i)    Item 1
(ii)   Item 2
(iii)  Item 3

Currently I have it working with the following HTML code:

<ol type="i">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

This gives me the following result:

i.    Item 1
ii.   Item 2
iii.  Item 3

Is it possible to display my list in the desired way I mentioned at the beginning of this question?

EDIT: Follow up question which is also part of accepted answer

How can I get wrapped items (items that are too long for one line) to automatically start new lines on the same tab line?

Answer 1

Using only CSS3, you can do it as follows:

ol {
    counter-reset: increment_var;
    list-style-type: none;
}
li:before {
    display: inline-block;
    content: "(" counter(increment_var, lower-roman) ") ";
    counter-increment: increment_var;
    width: 40px;
    margin-left: -40px;
}
li {
  margin-left: 40px;
  }

<ol>
  <li>Example 1 Example 1 Example 1 Example 1 Example 1 Example 1 Example 1 Example 1 Example 1</li>
  <li>Example 2</li>
  <li>Example 3</li>
  <li>Example 4</li>
  <li>Example 5</li>
</ol>