Left align both list numbers and text

Question

I\'d like to left align both the numbers and the text in my

. This is what I\'m trying to accomplish:

Answer 1

None of the existing answers worked for me, but by combining and building on them I found similar method that does, including for multiline entries, without requiring any tags inside list items:

ol {
    counter-reset: item;
}
li {
    display: block;
    margin-left: 1.7em;
}
li:before {
    content: counter(item) ". ";
    counter-increment: item;
    position: absolute;
    margin-left: -1.7em;
}

Which looks like this: https://jsfiddle.net/b3dayLzo/

I think it works by putting the li:before in the left margin of the li.

You may want a different margin-left.

There's no class on the ol because in my case this appears within the style of the container.