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

Question

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

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

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

一种选择是绝对定位伪元素相对到父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;
}

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

Ordered list with ":before" element text wrap issue

html

css

word-wrap