伪元素:before和:after

之所以称为伪元素，也就是说不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素，因此js是不可以操作为元素的，伪元素属于主元素的一部分，因此点击伪元素触发的是主元素的click事件。利用伪元素，可以减少dom节点数，让css帮助解决部分js问题，但是不利于SEO，且无法审查元素，不利于调试。

:before和:after添加的内容默认是inline元素；

content属性表示元素的内容, 其内容可设置为四种：

       1.字符串，字符串作为伪元素的内容添加到主元素中；

       2.attr(attr_name), 将伪元素的内容跟主元素的某个属性值进行关联，使其内容为主元素的某指定属性的值，当通过js动态修改主元素属性值时，伪元素内容也随之改变；

       3.url()/uri(), 用于引用外部资源，例如图片；
       4.counter(), 调用计数器，可以不使用列表元素实现序号问题。

实际上所有元素都可以设置伪元素，但是像img可替换元素，因为其外观和尺寸有外部资源决定，那么如果外部资源正确加载，就会替换掉其内部内容，这时伪元素也会被替换掉，但是当外部资源加载失败时，设置的伪元素是可以起作用的。

伪元素常用场景：

1. 最常用的场景就是清除浮动了

2.利用attr()来实现某些动态功能

3.与counter()结合实现序号问题，而不用使用列表元素。具体还要结合css的 counter-increment 和 counter-reset 属性的用法 。

4. 利用这两个伪元素，可以实现各种效果，如放大镜、叉叉、箭头、三角符等