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

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