伪类模仿 li 前面的圆点及各种符号

项目里有个需求就是改变li前面圆点的颜色 ,然后上网查了一下,看到知乎上有位大神提供的方法,伪类!
伪类模仿 li 前面的圆点及各种符号_第1张图片

伪类模仿 li 前面的圆点及各种符号_第2张图片

伪类模仿 li 前面的圆点及各种符号_第3张图片

代码片


<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>123li>
        <li>123li>
        <li>123li>
        <li>123li>
    ul>
body>
html>

代码就是上面的,核心部分

li:before {
            content: "❤ ";
            color: red;
        }

利用:before伪类在li前面插入符号图标,设定颜色就可以了!
另外我在网上还查了一份图标大全分享一下:字体图标地址链接

你可能感兴趣的:(css,css)