用单词代替子弹的无序列表？

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>