Question

我有以下CSS

ul {
  list-style: none;
}

ul > li::before {
  content: "";
  height: 1em;
  width: 1em;
  display: block;
  float: left;
  margin-left: -1.5em;
  margin-top: 7px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  transition: background-size 0.3s;
  -webkit-transition: background-size 0.3s;
}

ul > li::before {
  background-image: url(../images/check-mark.svg);
}

以下哪种HTML可以正常使用

  <ul>
    <li>first</li>
    <li>last</li>
  </ul>

现在，我想使用相同的复选标记添加第二个列表，但颜色不同。

所以，我更新了我的代码，如下所示

HTML

   <ul class="blue">
     <li>first</li>
     <li>last</li>
   </ul>

CSS

svg {
  fill: currentColor;
}

ul.blue > li::before {
  color: blue;
}

但是复选标记仍然是黑色的。如何在blue列表中的蓝色标记上打勾？

Answer 1

您不能仅使用颜色更改图像的颜色：蓝色；也许会起作用：

ul.blue > li::before {
fill: blue;
}

或者找到另一个带有蓝色复选标记的图像，然后以与添加图像相同的方式添加

ul.blue > li::before {
  background-image: url(../images/blue-check-mark.svg); 
}

SVG项目符号点的自定义颜色

1 个答案: