HTML有序列表数字计数器的对齐问题：如何将数字放在固定的背景框上？

Question

给定一个有序的 HTML 列表，我试图将其布局尽可能简单和干净。 HTML 无法更改或触及。只能更改 CSS。我只是无法将（罗马）数字放在黄色框上：

如何保持布局与现在的样子完全相同，但在黄色背景框中（而不是本身）显示（罗马）数字？

字母应位于方框上方“居中”。我希望这些盒子有一个固定的，无论（罗马）数字可能有多长。无论如何，它们通常会保持在 iii 以下。如果它们变得更大，如 iv、vii、xii 或 200，那么它们只是“溢出”到框上也没关系，其中一些文本将没有背景。我可以忍受，特别是因为我总是可以加宽盒子的宽度。

我希望所有文本的左对齐都完美地位于同一位置，无论单词多短或段落多长：

我准备了一个代码片段来显示确切的问题。

html {margin: 40px}
body {margin: 0 auto;}
article{background: #EEE;  padding: 0em;}

ol {
  list-style-type: none; 
  counter-reset: section;
  counter-increment: step-counter
   }

ol li{
    border-bottom: 2px solid #CCC;
    text-indent: -1em;
}

ol li:before {
    counter-increment: section;
    content: counter(section, lower-roman);
    margin: 0 .25em 0 0px;
    padding: 0px 0px;
    width: .75em;
    display: inline-block;
    background: yellow;
    color: blue;
}

<article>
Short Ordered List

<ol>
<li>First word</li>
<li>Second word</li>
<li>Third word</li>
</ol>


Paragraph Ordered List

<ol>
<li>Longer paragraph texts to test the indentation alignment for first and following lines of text. Longer paragraph texts to test the indentation alignment for first and following lines of text.Longer paragraph texts to test the indentation alignment for first and following lines of text.</li>
<li>Another paragraph texts to test the indentation alignment for first and following lines of text.Longer paragraph following lines of text.</li>
<li>Final long aragraph texts to test the indentation alignment for first and following lines of text.Longer paragraph texts to test the indentation alignment for first and following lines of text.Longer paragraph texts to test the indentation alignment for first and following lines of text.</li>
</ol>
</article>

Answer 1

仍在测试，但这似乎有效并解决了它：

删除：

ol li {text-indent: -1em;}

添加：

ol li:before {
width: 1em;
position: absolute;
text-align: center;
margin-left: -1.5em;
}