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.

Answer 2

You can fake it by using positioning, padding and margins.

jsFiddle example

.dinosaurs {
  list-style-position: inside;
  position:relative;
  margin-left: -20px;
}
a {
  position:absolute;
  left:70px;
}

Answer 3

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

Answer 4

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/

Answer 5

Try adding padding-left: 0; to your style, and changing list-style-position: to outside if necessary.

Answer 6

If you use list-style-position: inside; the number is placed inside the block of text. To adjust the position of the number and keep ident of the text use this css.

ol {
  list-style: none;
  counter-reset: step-counter;
  padding-inline-start: 25px;
}
ol > li {
  counter-increment: step-counter;
}
ol > li:before {
  content: counter(step-counter)".";
  display: inline-block;
  position: absolute;
  margin-left: -25px;
}

To keep your bullets also to the left

ul {
  list-style: none;
  padding-inline-start: 25px;
}
ul > li:before {
  content: '\25cf';
  position: absolute;
  margin-left: -25px;
}