html - 在 CSS 中突出显示右边距较短的文本

Question

我想在文本周围加亮，高亮处有左右边距。所以结果是:

不会是:

这是我目前所拥有的:

ol.number {
  list-style-type: none;
} 

ol.number {
  counter-reset: number;
  background-color:#FFFF00;
  margin-left: 0.5em;
  margin-right: 1em;
}

ol.number > li:before {
  content: "(" counter(number, decimal) ") ";
  counter-increment: number;
}

<ol class="number">
  <li>one</li>
  <li>quadrillion</li>
</ol>

有解决这个问题的想法吗？

Answer 1

给 ol 标签一个内联 block 的显示。然后给它左右填充:

ol.number {
  list-style-type: none;
  counter-reset: number;
  background-color: #FFFF00;
  padding: 0 8em 0 2.5em;
  margin-right: 1em;
  display: inline-block;
}

ol.number>li:before {
  content: "(" counter(number, decimal) ") ";
  counter-increment: number;
}

<ol class="number">
  <li>one</li>
  <li>quadrillion</li>
</ol>