关于伪元素before after总结

　  定义：css的伪元素，之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。

 　规范：css有一系列的伪元素，如:before，:after，:first-line，:first-letter等，这里详细介绍下:before和:after元素。注：css3中，为了与伪类区分，伪元素前应该使用两个冒号，即:hover伪类，::before伪元素。当然为了向下兼容，用一个冒号也是可以的，不过建议尽量使用规范的写法。

　特点：

• 伪元素不属于文档，所以js无法操作它。点击伪元素相当于触发主元素的click
• 伪元素属于主元素的一部分，因此点击伪元素触发的是主元素的click事件
• 原文说块级元素才能有:before, :after，其实是不妥的，大部分行级元素也可以设置伪元素，但是像img可替换元素，因为其外观和尺寸有外部资源决定，那么如果外部资源正确加载，就会替换掉其内部内容，这时伪元素也会被替换掉，但是当外部资源加载失败时，设置的伪元素是可以起作用的。

      用途： :before，:after这两个伪元素分别表示元素内容的【前】【后】，利用这两个伪元素可以在元素内容的前后添加内容，其实这没有什么前后的概念，如果应用了absolute的特性之后，你可以把这些伪元素放在任何位置，有了这两个伪元素，就代表每个元素都有两个助手可供使用，灵活运用它们的话将会得到很多有趣的实现，简化许多实现。下面是主要的用途：

1. 　　checkbox和radio的美化，众所周知html自带的选择框非常简洁（其实是简陋），不符合现代人对美的追求，因此很多系统都对选择框进行了美化。而有了这两个伪元素之后，可以结合label标签，实现选择框的美化，天马行空，怎么漂亮怎么来。
2.        利用attr()来实现某些动态功能，这个特性的作用是用主元素的某个属性的值作为content的值，当这个属性的值改变的时候，伪元素的值也会跟着改变，利用这个特性就可以实现动态信息了
3.        与counter()结合实现序号问题，而不用使用列表元素。具体还要结合css的 counter-increment 和 counter-reset 属性的用法。
4.        利用这两个伪类，可以实现各种需要简单的图标，如放大镜，叉叉，箭头等。
5.        扩大点击区域。
6.        实现label，代替label功能。
7. 　　url()/uri(), 引用外部资源，例如图片。
8.        清除浮动

　优点

• 减少dom节点数
• 让css帮助解决一部分js问题，让问题变得简单

　缺点

• 不利于SEO
• 代码读起来“可能”会有疑惑

附相关博客关于伪元素的介绍：

https://www.cnblogs.com/lvjiaqin/p/6555931.html

http://www.w3school.com.cn/css/css_pseudo_elements.asp

https://cloud.tencent.com/developer/article/1015717