伪元素选择器的三种使用场景 【字体图标，精灵图（背景图片），清除浮动】

伪元素，顾名思义就是假的元素。是指在html结构中看不到的元素。直接在css代码中实现。用法为，在元素后面加::（两个冒号）。比较常用的有::before 和::after。
意思分别是在盒子内容的前面和后面加一个伪元素。
用法：
.box::before {
content: ‘before’;
}
.box::after {
content: ‘after’;
}
在box盒子内容前面添加文字“before”。后面添加文字"after"

需要注意的是：
1、content属性必须要写，不想写内容可以为空congtent：‘ ’；
2、伪元素默认为行内元素。不可直接设置宽高。
3、可以在css中设置伪元素的其他属性（其他元素所具有的属性）如：显示模式，宽高，浮动定位，颜色背景颜色，字体属性，字体大小等等`~~~。
4、根据这些属性可以很方便的使用伪元素，并且可以减少html结构中的代码量。如下：

一、伪元素插入字体图标

首先引入阿里妈妈在线字体（其他方式也可，个人感觉比较方便而已）。
然后在需要插入字体图标的标签加上伪元素，（before内容前，after在内容后。可根据具体情况）
给伪元素设置content：“\图标代码 ”;（content内容是反斜杠加图标后4位代码）如 仅需要写e614即可。
之后声明字体 fontfamily：“iconfont”；

    .box::before {
        content: '\e614';
        font-family: "iconfont";
    }

即可。放大镜图标出现。字体图标的本质是字体，所以可以通过设置字体大小来控制字体图标的大小。

二、精灵图或者背景图片也可以使用字体图标来用；不过需要先把伪元素转化为块或者行内块元素才可设置宽高；
如下：
.box::after {
content: ‘after’;
display: block;
height: 20px;
width: 60px;
background: url(’…/…/02-CSS/第四天audio/images/images/arr.png’) no-repeat 40px 0 / contain;
}
这就通过伪元素after插入一个背景图片；
而html结构中仅有一个盒子。

三、通过伪元素来清除浮动
由于浮动的元素不占位置，因此不能撑开父盒子，但是由于条件限制又不能直接给父盒子设置高度。导致下面的盒子会上来。这就是浮动造成的影响。
我们可以使用伪元素来清除浮动造成的影响。
假设box盒子中的元素都设置了浮动。并且box没有设置高度，
这时我们给box添加伪元素：
.box1::after {
content: ‘’;
visibility: hidden;
height: 0;
line-height: 0;
clear: both;
}

    .box {
        *zoom: 1
    }

开发中常用的方法是给一个类名设置伪元素，用到的时候直接调用类名比较方便；如：
.clearfix::after {
content: ‘’;
visibility: hidden;
height: 0;
line-height: 0;
clear: both;
}

   .clearfix {
        *zoom: 1
    }
    使用的时候只需要给盒子加上 class=“clearfix”即可清除浮动。