specifing text as bullets in list

Question

I know in HTML you can use <ol><li></li></ol> to get a nice ordered list but doing that with list-style-type: decimal always increments the number by 1.

I'm looking for a way to set the value of the bullet text.

I might end up with a list that looks something like

12 item
22 item
 2 item

I don't want to do any crazy use of images if at all possible. Is there an easy solution for this?

I have HTML, CSS, javascript (jquery) and PHP available.

Answer 1

SOFlow: Is it possible to specify a starting number for an ordered list with css?

Make OL list start from number different than 1 using CSS. Other than that, the only way to accomplish this is through fancy positioning. This is one of those things I wish they hadn't deprecated.

Answer 2

That isn't really an ordered list then is it? You should just emulate a bullet in an unordered list:

<ul>
  <li><span>22</span> item
</ul>

Remove the bullet with list-style-type: none then style to taste.

Answer 3

The following should do the trick. However, be aware that value is a deprecated attribute for the li tag in HTML 4.

<ol>
<li value="12">item</li>
<li value="22">item</li>
<li value="2">item</li>
</ol>