带有“：before”元素文本换行问题的有序列表

Question

我正在尝试使用该li:before元素对我的有序列表进行编号。我已经搜索了一段时间，似乎无法找到答案-

有没有办法防止列表文本在 before 元素下换行？

https://jsfiddle.net/ngem6u20/

HTML：

<div style="width: 250px;">
   <ol class="red-circle">
      <li>Item number one</li>
      <li>Item number Two</li>
      <li>Item number threeItem number threeItem number</li>
   </ol>
</div>

CSS：

<div style="width: 250px;">
   <ol class="red-circle">
      <li>Item number one</li>
      <li>Item number Two</li>
      <li>Item number threeItem number threeItem number</li>
   </ol>
</div>

Answer 1

一种选择是将伪元素相对于父li元素padding-left绝对定位，然后用于置换绝对定位的伪元素。

更新示例

ol.red-circle {
  list-style-type: none;
}
ol.red-circle li {
  counter-increment: step-counter;
  margin-bottom: 20px;
  position: relative;
  padding-left: 2em;
}
ol.red-circle li:before {
  color: #fff;
  content: counter(step-counter);
  background: #ff6766;
  padding: .3em .6em;
  font-size: 500 14/24;
  border-radius: 50%;
  margin-right: 20px;
  position: absolute;
  left: 0;
}

<div style="width: 250px;">
  <ol class="red-circle">
    <li>Item number one</li>
    <li>Item number Two</li>
    <li>Item number threeItem number threeItem number</li>
  </ol>
</div>

或者，您也可以使用负值text-indent来替换伪元素：

更新示例

ol.red-circle li {
    counter-increment: step-counter;
    margin-bottom: 20px;
    text-indent: -3em;
}