CSS - список отступов при переносе мягкой строки в положение символа

Question

У меня есть такой список:

<ol>
<li>2017 &mdash; Lorem ipsum blah blah blah blah blah blah blah blah blah.
<li>2018 &mdash; Lorem ipsum blah.
</ol>

В настоящее время это выглядит так:

* 2017 — Lorem ipsum blah blah blah blah 
  blah blah blah blah blah.
* 2018 - Lorem ipsum blah.

Что мне нужно, так это обернуть его так:

* 2017 — Lorem ipsum blah blah blah blah 
         blah blah blah blah blah.
* 2018 - Lorem ipsum blah.

В QuarkXPress вы можете ввести специальный скрытый символ, который заставляет отступ всех строк текста от этой точки до возврата следующего абзаца.(В приведенном выше примере этот специальный скрытый символ будет идти перед «L».) Это то, что мне нужно в CSS - существует ли такая вещь?

Answer 1

Для этого можно использовать псевдоэлемент и счетчик:

ol {
  counter-reset: section 2016;
  list-style:none;
}
ol li {
  display:flex;
}

li::before {
  counter-increment: section; 
  content: counter(section) " — "; 
  margin-right:5px;
  flex-shrink:0;
}

<ol>
<li>Lorem ipsum blah blah blah blah blah blah blah blah blah  blah blah blah blah blah blah blah blah blah. blah blah blah blah blah blah blah blah blah. blah blah blah blah blah blah blah blah blah.</li>
<li>Lorem ipsum blah.</li>
</ol>