使用before ::选择器创建自定义列表标记时，如何在多行中固定列表内容缩进？

Question

我已经使用CSS选择器“ before ::”和CSS Counter创建了一个自定义列表标记。

替换列表标记按预期显示，但是我无法固定自定义标记和列表内容之间的缩进，因此当列表项跨越多行时，各行之间会有固定的缩进和标记。

ul {
  list-style: none;
}

li {
counter-increment: myCounter;
}

li::before {
  content: counter(myCounter) ' ==> ';
}

<ul>
  <li> My first list </li>
  <li> My second list </li>
  <li> My third extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra long List </li>
  <li> My fourth list </li>
</ul>

以下是（类似于我的，但没有用::before选择器制作的标记）回答的另一个问题，但是在这种情况下不起作用： How to keep indent for second line in ordered lists via CSS?

请清楚一点，我想执行以下缩进样式（但带有我的自定义列表标记）：

ul {
  list-style-position: outside;
}

<ul>
  <li>My first list</li>
  <li>My second list</li>
  <li>My third really really really really really really really really really really really really long list</li>
  <li>My fourth list</li>
</ul>