Después de tanto luchar hemos encontrado la respuesta de esta cuestión que algunos de nuestros lectores de este espacio han presentado. Si tienes algún detalle que aportar no dudes en aportar tu información.
Solución:
Esto parece funcionar:
.dinosaurs counter-reset: item
.dinosaurs li display: block
.dinosaurs li:before
content: counter(item) ". ";
counter-increment: item;
width: 2em;
display: inline-block;
Puede colocar los elementos de la lista de esta manera:
.dinosaurs
list-style-position: inside;
.dinosaurs li
position: relative;
.dinosaurs li a
position: absolute;
left: 30px;
lo que produciría http://jsfiddle.net/wBjud/2/
Ninguna de las respuestas existentes funcionó para mí, pero al combinarlas y desarrollarlas, encontré un método similar que sí lo hace, incluso para entradas de varias líneas, sin necesidad de etiquetas dentro de los elementos de la lista:
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;
Que se ve así: https://jsfiddle.net/b3dayLzo/
Creo que funciona poniendo el li:before en el margen izquierdo de la li.
Es posible que desee una diferente margin-left.
No hay clase en el ol porque en mi caso esto aparece dentro del estilo del contenedor.
Nos puedes añadir valor a nuestro contenido aportando tu veteranía en las acotaciones.