使用css更改列表的项目符号颜色[重复]

Question

CSS3 模块的分类和状态。
● 推荐
● 候选人推荐
● 最后通话
● 工作草案。

我需要按照您在上面看到的那样做。圆圈必须有不同的颜色。我不是要求任何人为我做这件事，但我希望这里的人能指出我正确的方向。
任何帮助将不胜感激。

Answer 1

您可以将list-style 设置为none，并在:before 中插入一个点：

ul,
li {
  list-style: none;
  padding: 0;
  }

.rec:before {
  color: red;
 }
.can:before {
  color: blue;
 }
.lastCall:before {
  color: yellow;
 }

.working:before {
   color: black;
 }

.dot-style:before {
  content: "•";
  padding-right:4px;
  vertical-align:middle;
  font-size:1.8em;
}

<ul>
  <li class="rec dot-style">Recommendation</li>
  <li class="can dot-style">Candidate Recommendation</li>
  <li class="lastCall dot-style">Last Call</li>
  <li class="working dot-style">Working Draft</li>
<ul>

Answer 2

只需在元素周围放置一个跨度并使用类来更改颜色。

Taxonomy and status of CSS3 modules. <span class="red">●</span> Recommendation <span class="yellow">●</span> Candidate Recommendation <span class="green">●</span> Last Call <span class="blue">●</span> Working Draft

.red{
  color: red;
}
.yellow{
  color: yellow;
}
.green{
  color: green;
 }
.blue{
  color: blue;
}