CSS伪元素实战-CSDN博客

本文链接：https://blog.csdn.net/lsmxx/article/details/104632023

伪元素：可以当做html标签用css样式来操作，但是没有html结构

（1）任何一个元素都有伪元素，可以当做正常元素来使用。

（2）::before ：在标签的逻辑之前；::after：在标签的逻辑之后

（3）通过css选择器选中伪元素，对伪元素进行修改，而不是通过css创造了伪元素。

（4）content设置伪元素的文字内容，即使没有文字，也必须存在。

（5）伪元素的默认display：inline；可以修改。

使用伪元素可以实现：

元素前后插入文字
设置背景图片
清除浮动

元素前后插入文字，设置背景

参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        ul,li{
            list-style: none;
        }
        body{
            background-color: #eee7e1;
        }

        .wrapper{
            width: 320px;
            background-color: #fff;
          
        }

        .wrapper > h3{
            height: 50px;
            line-height: 50px;
            background-color: #e9185a;
            color:#fff;
            padding-left: 10px;

        }

        .wrapper li{
            height: 50px;
            line-height: 50px;
            margin: 0 10px;
            border-bottom: dotted 1px #000;
            counter-increment: number;
            position: relative;
        }

        .wrapper li:last-child{
            border: none;
        }

        .wrapper li::before{
            content: counter(number);
            position: absolute;
            top:10px;
            width:30px;
            height: 30px;
            line-height: 30px;
    
            border-radius: 50%;
            background-color: #ccc;
            color:#fff;
            text-align: center;
            font-size: 12px;
        }

        .wrapper li:hover::before{
            background-color: #e9185a;

        }

        .wrapper li a{

            font-size: 14px;
            color:#333;
            text-decoration: none;
            margin-left: 35px;
        }

        .wrapper li:hover a{
            color:#e9185a;
        }


    </style>
</head>

<body>
    <div class="wrapper">
        <h3>大家都喜欢买的美容品</h3>
        <ul>
            <li><a href="#">雅诗兰黛即时修护眼部精华霜15ml</a></li>
            <li><a href="#">伊丽莎白雅顿显效复合活肤霜 75ml</a></li>
            <li><a href="#">OLAY玉兰油多效修护霜 50g</a></li>
            <li><a href="#">巨型一号丝瓜水320ML</a></li>
            <li><a href="#">倩碧保湿洁肤水2号 200ml</a></li>
            <li><a href="#">比度克细肤淡印霜 30g</a></li>
            <li><a href="#">兰芝 (LANEIGE)夜间修护锁水面膜 80ml</a></li>
            <li><a href="#">SK-II护肤精华露 215ml</a></li>
            <li><a href="#">欧莱雅青春密码活颜精华肌底液</a></li>
        </ul>
    </div>
</body>

</html>

清除浮动

.wrapper::after{
    content:'';
    display:block;
    clear:both;
}

css3 伪元素的使用

元素前后插入文字，设置背景

清除浮动