HTML ordered list - specific order

Question

in HTML/CSS, is it possible to have my ordered list in the following format?

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

More generally, is it possible to create my own format for ordered lists?

Answer 1

Sure, you could use the <ol> tag for roman numerals simply by adding a type.

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

This HTML spits out:

i. Coffee
ii. Tea
iii. Milk

More information can be found here: http://www.w3schools.com/tags/att_ol_type.asp

For you o being the first position item, start your count at the second item and prepend the first one using Javascript or jQuery.

Answer 2

So what you want is an arbitrarily styled first element. All subsequent list items should then have a number text which is one lower than their natural ordering would suggest. Correct?

Thus, your HTML List is simply:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>

The following CSS does the actual magic. However (minor drawback), I believe you need to set the width of the :before pseudo-element explicitly in order to resemble the appearance of an "ordinary" list.

ol {
  list-style-type: none;
}

li {
  counter-increment: strangecounter;
}

li:before {
  content: counter(strangecounter, lower-roman) ". ";
  display: inline-block;
  width: 2em;
  text-align: right;
  margin-right: 0.5em;
}

ol :first-child {
  counter-reset: strangecounter -1;
}

ol :first-child:before {
  content: "o. ";
}