Unordered list with words instead of bullet?

Question

是否可以修改无序列表的样式，以便代替项目符号，可以以比在<ul>标签的样式中使用:before选择器指定该单词更简单的方式使用实际单词？

Answer 1

You can achieve what you're trying to do with the :before psuedo-selector without actually needing to define separate content for each :before using the CSS counters .

Here's a demo:

 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>