带有“：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：

ol.red-circle {
   margin-left: 0;
   padding-right: 0;
   list-style-type: none;
}

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

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;
}

Answer 1

一个选项是将伪元素 relative 绝对定位到父li元素，然后使用padding-left替换绝对定位的伪元素。

Updated Example

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值来替换伪元素：

Updated Example

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