::before和::after的一些使用场景
  如果你想在某些文字的前面加图标或者改变li元素的默认图标，你会如何做？常见的做法是在文字前再加一个标签用于存放图标，引入一个图标库（比如Iconfont-阿里巴巴矢量图标库）或者一张图标图片。
这里介绍一种不使用额外的html标签，纯粹使用css就能插入到html内容中或者制作自定义图标。
常见伪元素——::first-letter,::first-line,::before,::after,::selection。
::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。
特性：
1）这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标，网站有些，希望在它们前加一个icon，就可以使用:before伪元素。
2）伪元素:before和:after添加的内容默认是inline元素，所以利用伪元素添加形状内容时，需要设定display:block；不然无法设定长宽。
3）伪元素不属于文档，所以js无法操作它，伪元素属于主元素的一部分，因此点击伪元素触发的是主元素的click事件。
定义：在被选中的元素的内容前面（before）和后面(after)插入内容。
语法：
  　p::before{              p::after{ 
             content:'内容'；          　content:'内容';
        　}                　}
  使用场景：
例一：在i元素前面添加一个图标（引入阿里巴巴矢量库）
1）Html代码
     
2）首先在阿里巴巴矢量库下载需要的图标，然后引入，参考“引入外部图标.doc”文档，如下图，是引入的css代码。
3）使用::before在i元素前面添加引入的图标。
content中是图标代码，下载的图标文件中，有一个demo_index.html文件，打开后会显示图标的代码，如下图，需要去掉前面的&#x，并且添加“＼”才可以。
4）整体代码和效果如下图
例二：在li元素前面添加一个图标,修改掉原来的图标
1）效果图（前面的图标是从库里引用的，参考上一例）
2）代码
例三：在元素前面添加一个图形
icon图标库1）如下图，在文字前后添加矩形效果条
2）html代码
3）css代码
例四：给图片添加一闪而过的白闪光
    1）如下图，给图片添加一个白光，鼠标放置在图片上时，会闪过一道白光。
2）html代码
3）css代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。