CSS樣式列表標記

Question

我該如何去設計一個列表標記？比如使它變成不同的顏色，使其變得粗體，改變尺寸等等。是否可以像設計字體一樣設計它的樣式？

例如。

1. 這是一個列表項。

我可以針對「1.」特別是不影響文本的其餘部分？

我知道有些方法可以改變類型，比如使它變成羅馬字形，或者使它成爲正方形或其他任何使用列表式的類型，但是這些似乎沒有我期待的樣式選項對於。

Answer 1

爲了實現有序列表項中的樣式，您同樣需要使用僞元素和計數器。

ol { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    counter-reset: my-counter; 
 
} 
 

 
ol li { 
 
    position: relative; 
 
    padding-left: 10px; 
 
    counter-increment: my-counter; 
 
} 
 

 
ol li:before { 
 
    content: counter(my-counter); 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    color: red; 
 
    margin-right: 10px; 
 
}

<ol> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
</ol>