僞類模仿 li 前面的圓點及各種符號

項目裏有個需求就是改變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前面插入符號圖標,設定顏色就可以了!
另外我在網上還查了一份圖標大全分享一下:字體圖標地址鏈接

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章