Как я могу заменить периоды в упорядоченном списке с помощью emdasash и при этом сохранить правильные отступы?

Question

Я пытаюсь оформить упорядоченный список так, чтобы числа были выровнены с левым полем, периоды были заменены на электронные черты, а содержимое элемента списка было с одинаковым отступом. Я подошел довольно близко:

При этом используется следующее CSS:

ol {
    counter-reset: list;
    padding: 0;
    margin-left: 2em;
}
ol > li {
    list-style: none; /* remove this line and you can see the 'real' numbering */
}
ol > li:before {
    content: counter(list) "— ";
    counter-increment: list;
    margin-left: -2em;
}

Но это только запас -left стилизация на li: до того, как это заставит его выглядеть таким образом и перестанет работать, когда числа станут выше 10. Замена emda sh на другой символ также сломает его.

Есть ли способ добиться этого

Answer 1

Добавьте padding-left к ol, установите псевдоэлемент на display:inline-block, установите ширину, достаточную для ожидаемого максимального количества символов, и примените text-align:right.

Отредактируйте свои значения по мере необходимости

ol {
  counter-reset: list;
  padding: 0;
  padding-left: 4em;
  margin: 1em;
}

ol>li {
  list-style: none;
  /* remove this line and you can see the 'real' numbering */
}

ol>li:before {
  content: counter(list) "— ";
  counter-increment: list;
  margin-left: -4em;
  width: 2.5em;
  display: inline-block;
  text-align: right;
}

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos commodi perferendis nobis optio quaerat eveniet minus odio accusamus quo eos assumenda totam itaque ullam, voluptate sed! Dicta quae repudiandae voluptate debitis earum quis culpa, quas labore, reiciendis perspiciatis cum corporis exercitationem error expedita deserunt est vero quasi enim harum nisi.</p>
<ol>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
</ol>