带有单词而不是子弹的无序列表？

Question

是否可以修改无序列表的样式，以便使用<ul>标签在:before标签的样式中指定该单词时，可以使用实际单词而不是项目符号来实现单词。 1}}选择器？

Answer 1

您可以使用:before伪造选择器实现您的目标，而无需使用 {{3}为每个content定义单独的:before }

这是一个演示：

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>