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>

有什么想法可以解决这个问题吗？

标签： htmlcss

Answer 1

给ol标签一个 inline-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>