伪元素::before和::after的用法

1.CSS3中的伪元素

在实际的开发工作中，有人会把伪元素用1个冒号来写，这实际是 CSS2 与 CSS3新旧标准的规定不同而导致的。
CSS2 中的伪元素使用1个冒号，在 CSS3 中，为了区分伪类和伪元素，规定伪元素使用2个冒号。所以，对于 CSS2 标准的老伪元素，比如:first-line，:first-letter，:before，:after，写一个冒号浏览器也能识别，但对于 CSS3 标准的新伪元素，比如::selection，就必须写2个冒号了。
如果不需要考虑IE8以下的浏览器，建议都使用2个冒号的新标准写法来写。否则还是使用1个冒号吧！

 

2.用法

1. 标准写法是双冒号(但考虑兼容性也有人写单冒号）

2.::before和::after在被选中元素里面，元素现有内容之前(后) 插入内容，需要使用content属性指定要插入的内容。content必须有值（空值也行）。

3.content插入的内容默认是inline元素 可以通过display：block改变

 

3.优点和缺点

优点：

1. 不占用DOM节点，减少DOM节点数

2.让css帮助解决了一部分JavaScript问题，简化了开发

3.不仅块级元素可以设置伪元素，大部分行级元素也可以

4.避免增加毫无意义的页面元素

缺点：

1.不利于调试

2.伪元素不真正在文档内容中体现，只在视觉效果上体现，所以不能给伪元素添加具有实际意义的内容，这部分内容不会搜索引擎抓取。