帶有「：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; 
}