項目裏有個需求就是改變li前面圓點的顏色 ,然後上網查了一下,看到知乎上有位大神提供的方法,僞類!
代碼片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css模仿li圓點</title>
<style>
ul {
list-style: none;
margin: 0 auto;
padding: 0;
width: 100px;
}
li:before {
content: "❤ ";
color: red;
}
</style>
</head>
<body>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</body>
</html>
代碼就是上面的,核心部分
li:before {
content: "❤ ";
color: red;
}
利用:before僞類在li前面插入符號圖標,設定顏色就可以了!
另外我在網上還查了一份圖標大全分享一下:字體圖標地址鏈接