HTML ordered list with custom text

Question

I have the following HTML:

<ol>
    <li>foo</li>
    <li>bar</li>
    <li>testing</li>
    <li>hello world</li>
</ol>

This, of course, works and gives the following output:

1. foo
2. bar
3. testing
4. hello world

Now my problem is that I sometimes need to have different text instead of the numbers. The text should be completely customizable, so CSS :before solutions don't work for me.

Consider this example, a listing of TV series episodes:

    12. The Duel
    13. Prince Family Paper
14./15. Stress relief
    16. Lecture Circuit: Part 1

So essentially I'm trying to create a "fake" <ol> so that all the text after the numbers is correctly aligned. Is there any way I can achieve this in HTML/CSS?

Answer 1

I think that you will have to solve it with a table without borders. Align the first tds to the right and the second ones to the left. Is what I think that would most closely resemble what you want.

Something like:

css:

table {
    border: none;
}
table tr td:first-child {
    text-align: right;
}

html:

<table>
<tr>
    <td>12.</td>
    <td>The Duel</td>
</tr>
<tr>
    <td>13.
    <td>Prince Family Paper
</tr>
<tr>
    <td>14./15.</td>
    <td>Stress relief</td>
</tr>
<tr>
    <td>16.</td>
    <td>Lecture Circuit: Part 1</td>
</tr>
</table>