Barry Doyle Barry Doyle - 1 year ago 44
HTML Question

HTML: How to change ordered list item point displays?

I have an

tag (ordered list) in my
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

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

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 Source

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