Custom color for SVG bullet point

问题: I have the following CSS ul { list-style: none; } ul > li::before { content: ""; height: 1em; width: 1em; display: block; float: left; margin-left: -1.5...

问题:

I have the following 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);
}

Which works fine with the HTML below

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

Now, I want to add a second list using the same check-mark but having different color.

So, I have updated my code as follows

HTML

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

CSS

svg {
  fill: currentColor;
}

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

But the check-mark is still black. How can I have the check-marks in the blue list blue?


回答1:

You cant change the color of the image with just color: blue; Maybe this will work:

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

Or just find another image with blue check mark and add it the same way like

ul.blue > li::before {
  background-image: url(../images/blue-check-mark.svg); 
}
  • 发表于 2019-03-18 23:25
  • 阅读 ( 136 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除