[英]Custom color for SVG bullet point
我有以下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
列表中的复选标记设为蓝色?
你不能只用颜色改变图像的颜色:蓝色; 也许这会奏效:
ul.blue > li::before {
fill: blue;
}
或者只是找到带有蓝色复选标记的另一个图像,并以相同的方式添加它
ul.blue > li::before {
background-image: url(../images/blue-check-mark.svg);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.