如何实现列表项对齐前导边距且多行文本对齐？

我查了大量“列表对齐”相关问题都没找到答案，想实现列表对齐到左/前导边距，同时文本换行时保持对齐——这是Pages文字处理软件的默认行为，示例如下：

可以看到编号左侧与上方的“Text”完全对齐。有没有无需手动设置硬编码内边距的实现方法？硬编码方式换字体就会失效，稳定性极差。

我用HTML尝试时遇到了这些问题：

<p>Indented too much.</p>
<ol>
  <li>Bigfoot</li>
  <li>Loch Ness Monster</li>
  <li>Chupacabras</li>    
</ol>

<p>With padding:0, numbers off to the left:</p>
<ol style='padding-left:0'>
  <li>Bigfoot</li>
  <li>Loch Ness Monster</li>
  <li>Chupacabras<br/> Second line</li>    
</ol>

<p>With list-style-position:inside, second line not aligned.</p>
<ol style='list-style-position:inside;padding-left:0'>
  <li>Bigfoot</li>
  <li>Loch Ness Monster</li>
  <li>Chupacabras <br/> Second line</li>    
</ol>

设置padding:0时，编号会偏移到左侧；设置list-style-position:inside时，第二行文本无法对齐。

可以用CSS计数器实现这种需求，完全不需要硬编码固定内边距，能适配不同字体：

.custom-ordered-list {
  list-style: none;
  padding-left: 0;
  counter-reset: list-counter;
}

.custom-ordered-list li {
  counter-increment: list-counter;
  position: relative;
  padding-left: 2em; /* 预留编号空间，em单位随字体大小自动调整 */
}

.custom-ordered-list li::before {
  content: counter(list-counter) ".";
  position: absolute;
  left: 0;
  text-align: right;
  width: 1.5em; /* 给编号足够宽度，支持多位数编号对齐 */
}

对应的HTML结构：

<p>Text</p>
<ol class="custom-ordered-list">
  <li>Bigfoot</li>
  <li>Loch Ness Monster</li>
  <li>Chupacabras<br/>Second line</li>
  <li>Long long long long long long long long long long long long text that will wrap to the next line</li>
</ol>

优势说明 #

• 编号与左侧文本完全对齐，换行后文本保持和第一行对齐
• 使用em单位，随字体大小自动适配，无需硬编码固定值
• 支持多位数编号（如10、100），编号右对齐不会打乱整体布局

内容的提问来源于stack exchange，提问作者Rob N