定义：
之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。如下图，是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查。
当你看别人代码的时候，你会发现::before与:before
::before与:before
相同点：
1、伪类对象，用来设置对象前的内容
2、::before和:before写法是等效的
不同点：
:befor是Css2的写法，::before是Css3的写法
:before的兼容性要比::before好
建议：
不过在H5开发中使用::before比较好
优缺点
-
优点
- 减少dom节点数
- 让css帮助解决部分js问题，让问题变得简单
-
缺点
- 不利于SEO
- 无法审查元素，不利于调试
说明：
1、伪类元素要配合content属性一起使用
2、伪类元素是css渲染层加入的，不能通过js来操作
3、伪类对象特效通常通过：hover伪类样式来激活
css3伪元素有哪些?
1）:first-letter：向文本的第一个字母添加特殊样式。
2）:first-line: 向文本的首行添加特殊样式。
3）:before：在元素之前添加内容。
4）:after：在元素之后添加内容。
5）::placeholder：匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效。（只支持双冒号的形式）。
6）::selection：CSS伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。（只支持双冒号的形式）。
7）::backdrop(处于试验阶段)：用于改变全屏模式下的背景颜色，全屏模式的默认颜色为黑色。（只支持双冒号的形式）。
如何使用::before和::after
铺垫了这么多，回归正题
在元素前后增加额外的内容
before:选择器向选定的元素前插入内容,使用content属性来指定要插入的内容
after:选择器向选定的元素之后插入内容
例如
《JavaScript高级程序设计》
p::before{
content: "《";
color: #000000;
}
p::after{
content: "》";
color:#000000;
}
<p>JavaScript高级程序设计</p>
使用场景：
扩大按钮的可点击区域,增强用户体验
文字前面（后面）加图标
清除浮动
清除浮动的本质: 主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
方式一：
.classic-clearfix::after {
content: '';
display: block;
clear: both;
}方式二：
.modern-clearfix {
display: flow-root;
}使用 content 的属性
