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

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