Inserting extra item 2A in HTML <ol>

Question

I'm sure this must have been asked before, but I cannot locate it.

I'd like to create an ordered list in which the items are numbered 1, 2, 2A, 3, 4, …. I have no choice on the numbering as it must conform to a published standard which inserted 2A to correct an omission in an earlier version without renumbering.

Obviously I can use a <dl> and put all the numbers in by hand, and absent a better solution I'll do that; but it feels wrong. I cannot do <li value="2A"> as the attribute must be a number, and testing in Firefox 37 the "A" is ignored. I've tried using li::before { content: '2A' } in CSS, but evidently Firefox doesn't use that to generate the marker as the CSS 3 Lists draft says.

Any suggestions? I don't mind a solution that only works in relatively modern browsers.

Answer 1

You can try not to rely on the list-style-property but on the CSS counter-increment-property. It could look like this:

ol {list-style-type: none; counter-reset: section;}
li:before {
    display: inline-block;
    width: 2em;
    text-align: right;
    margin-right: 1em;
    counter-increment: section;
    content: counter(section) ". ";
}
li.special:before {
    counter-increment: none;
    content: counter(section) "A. ";
}

<ol>
  <li>Thing 1</li>
  <li>Thing 2</li>
  <li class="special">Thing 2 old</li>
  <li>Thing 3</li>
</ol>

You will have to apply the .special-classes manually though and maybe need some more for "B" or "C". But maybe this is worth a shot.