在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标签显示内联块。然后将其填充到左侧和右侧：

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>

Answer 2

使用此示例：

<div style="100px"><p><span style="background:yellow;padding-left:10px;padding-right:10px">one</span></p></div>

您可以更改div的大小，使其适合您的需求。