css中伪元素的运用

::before与::after

        before是在之前添加，after是在之后添加

        运用场景:

        例如①:一行文字下方添加一条下划线 可以利用box 的下边框，也可以利用after设置一条下划线。

        ②:清除浮动(BFC)，

        

// 待清除浮动的calss
.floatfix:after {
                // 设置为块级元素
                display: block;
                // 内容填充为空
                content: '';
                // 清除浮动
                clear: both;
                height: 0;
            }

        ③:一般来说，加一个logo或者图标都是利用before 来填充(优点能有效减少标签，降低命名压力)

        

    .logo {
            display: flex;
            // 设置为手型，在ie中存在兼容问题
            cursor: pointer;
            ::before {
                display: block;
                width: 40px;
                height: 40px;
                margin-top: 10px;
                margin-right: 10px;
                content: '';
                background: url(../images/logo.png) center center / 40px 40px no-repeat;
            }
            h1 {
                display: flex;
                font-size: 24px;
                line-height: 70px;
                // 引入的颜色，方便修改
                // color: @paray;
                color: #fff;
                margin-right: 20px;
            }
        }

        待补充

                less中添加伪元素，需要&::after