Left align both list numbers and text
This seems to work:
.dinosaurs { counter-reset: item }
.dinosaurs li { display: block }
.dinosaurs li:before {
content: counter(item) ". ";
counter-increment: item;
width: 2em;
display: inline-block;
}
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.
You could position the list elements like so:
.dinosaurs {
list-style-position: inside;
}
.dinosaurs li{
position: relative;
}
.dinosaurs li a {
position: absolute;
left: 30px;
}
which would yield http://jsfiddle.net/wBjud/2/
Try adding padding-left: 0;
to your style, and changing list-style-position:
to outside
if necessary.