用單詞代替子彈的無序列表？

Question

是否可以修改無序列表的樣式，以便代替子彈，可以使用比標籤的樣式中使用:before選擇器指定該單詞更簡單的方式來使用實際單詞？

Answer 1

你可以達到你想要什麼與:before僞選擇做而不實際需要使用CSS counters定義每個:before單獨content。

這裏有一個演示：

ul li { 
 
    list-style: none; 
 
} 
 
ul { 
 
    counter-reset: my-badass-counter; 
 
} 
 
ul li:before { 
 
    content: 'S'counter(my-badass-counter)'.'; 
 
    counter-increment: my-badass-counter; 
 
    margin-right: 5px; 
 
    font-weight: bold; 
 
    position: absolute; 
 
    margin-left: -25px; 
 
}

<ul> 
 
    <li>One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One. One./li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
    <li>Six</li> 
 
    <li>Seven</li> 
 
    <li>Eight</li> 
 
</ul>