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

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;
}