How to style list item with custom marker?

Question

css

It needs to be applied list-style-positionto lists, but since the standard marker has been canceled and a custom marker is used instead, the property does not work. It is necessary that there are indents as on the screen.

snippet here

Answer 1

ul.list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  counter-reset: list-counter;
  li {
    position: relative;
    padding-left: 30px;
    &::before {
      counter-increment: list-counter;
      content: counters(list-counter,".") " ";
      position: absolute;
      left: 0;
      top: 5px;
      display: block;
      font-size: 12px;
    }
  }
}

Answer 2

Through &:before or &:after, through background-image and absolute attach to li, and indent text in li