Barry Doyle Barry Doyle - 3 months ago 9
HTML Question

HTML: How to change ordered list item point displays?

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

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>

Comments