CSS中的:after和:before属于伪元素选择器，能够为选中的DOM元素在内容前后创建虚拟的节点，开发者可以通过CSS控制这些虚拟节点的样式、内容，无需修改HTML结构就能实现很多特殊效果。
:after和:before的核心作用
这两个伪元素的主要作用是在不增加额外HTML标签的前提下，为元素添加装饰性内容或者辅助内容，常见的使用场景包括以下几类：
- 为元素添加前后装饰，比如角标、分割线、图标等
- 实现文字前后的特殊符号，比如引用符号、列表标记等
- 清除浮动，解决父元素高度塌陷的问题
- 实现一些纯CSS的动画效果，比如加载动画、悬停特效等
基本使用方法
使用:after和:before伪元素时，必须设置content属性，否则伪元素不会生效，content可以设置为空字符串、文本内容、图片路径等，同时可以像普通元素一样设置宽高、颜色、定位等样式。
基础语法示例
/* 为类名为box的元素前添加虚拟节点 */
.box:before {
content: "前缀内容";
color: #ff0000;
margin-right: 8px;
}
/* 为类名为box的元素后添加虚拟节点 */
.box:after {
content: "";
display: block;
width: 100%;
height: 1px;
background: #eeeeee;
margin-top: 10px;
}常见使用案例
案例1：清除浮动
当父元素内部子元素全部浮动时，父元素会出现高度塌陷的问题，使用:after伪元素可以轻松解决这个问题，不需要额外添加空的清除浮动标签。
/* 父元素样式 */
.clearfix:after {
content: "";
display: block;
clear: both;
/* 兼容IE老版本 */
visibility: hidden;
height: 0;
}
/* 兼容IE8以下版本 */
.clearfix {
zoom: 1;
}<div class="clearfix">
<div style="float: left; width: 100px; height: 100px; background: #cccccc;"></div>
<div style="float: left; width: 100px; height: 100px; background: #dddddd;"></div>
</div>案例2：添加引用符号
可以为引用块的前后添加双引号，增强视觉表现，不需要在HTML中手动写入引号字符。
.quote {
position: relative;
padding: 10px 20px;
background: #f5f5f5;
border-radius: 4px;
}
.quote:before {
content: "“";
font-size: 30px;
color: #999999;
position: absolute;
left: 5px;
top: 0;
}
.quote:after {
content: "”";
font-size: 30px;
color: #999999;
position: absolute;
right: 5px;
bottom: 0;
}使用注意事项
content属性是伪元素生效的必要条件，即使不需要插入内容也要设置content: ""- 伪元素默认是行内元素，如果需要设置宽高，需要手动修改为块级元素或者行内块元素
- :before伪元素的内容会显示在元素原有内容的前面，:after伪元素的内容会显示在原有内容的后面
- 伪元素不属于DOM节点，无法通过JavaScript直接获取和操作
- 如果需要设置伪元素的:hover等交互样式，需要写在原选择器的伪元素规则中，比如
.box:hover:after