关于伪元素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