HTML5/CSS: aligning labels to the left of list items

css, html

Solution

Demo Fiddle

A potential CSS solution could be the below- you will need to edit for your own uses but should give you a starting point:

HTML

<ol>
    <li data-label='label1'>Item 1</li>
    <li data-label='label2'>Item 2</li>
    <li data-label='label3'>Item 3</li>
    <li data-label='label4'>Item 4</li>
    <li data-label='label5'>Item 5</li>
</ol>

CSS

ul{
    position:relative;
}
li{
    margin-left:20px;
}
li:before{
    content:attr(data-label);
    position:absolute;
    left:0px;
}

Problem

I'm trying to create an ordered list, where some items in the list have labels on their right. The labels should be aligned perfectly to the list items they are related to. something like this: ``` (label) 1. first item 2. second item (label) 3. sub list: (a) first sub item (b) second sub item (c) third sub item (label) 4. fourth item ... ``` The first thing I thought about was a table, but lists inside tables are invalid in HTML. The second thing I thought about was creating a list in one DIV, and the labels in another DIV, but that I cannot align each label to the related list item. The third thing I thought about was not using a list at all, just writing the numbers, but then broken lines don't get indented correctly. The only solution I can come up with is a table (or set of DIVs) where each item is a separate with the START attribute set individually. This is obviously a very bad solution, but it will at least look ok. Is there any other solution for this?

Original source