CSS中的伪元素::before和::after可以在选中元素的内容前后插入虚拟的DOM节点，这些节点不会出现在实际的HTML结构中，但可以被CSS样式控制，是前端开发中优化样式实现的重要工具。
::before和::after的基本语法
这两个伪元素需要和::before、::after选择器配合使用，并且必须设置content属性，否则伪元素不会生效。content可以设置为空字符串、文本内容、图片路径等。
基本语法示例如下：
/* 选中类名为box的元素，在其内容前插入伪元素 */
.box::before {
content: "前缀文本"; /* content是必填属性 */
color: #ff0000;
margin-right: 8px;
}
/* 选中类名为box的元素，在其内容后插入伪元素 */
.box::after {
content: ""; /* 空内容也可以，用于实现装饰效果 */
display: inline-block;
width: 10px;
height: 10px;
background-color: #00ff00;
margin-left: 8px;
}
常见使用场景
1. 添加装饰性图标或文本前缀后缀
可以在不修改HTML结构的情况下，为列表项、按钮等元素添加统一的前缀或后缀内容，比如给所有外部链接添加跳转图标。
/* 给所有指向外部地址的a标签添加跳转图标 */
a[target="_blank"]::after {
content: "↗"; /* 跳转图标字符 */
font-size: 12px;
margin-left: 4px;
color: #666666;
}
/* 给无序列表的每一项添加自定义前缀圆点 */
ul.custom-list li::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #1890ff;
margin-right: 8px;
vertical-align: middle;
}
2. 实现气泡提示效果
利用::before或::after可以制作气泡的三角箭头，不需要额外添加HTML元素，只需要通过边框属性绘制三角形即可。
/* 气泡容器样式 */
.tooltip {
position: relative;
display: inline-block;
padding: 8px 16px;
background-color: #333333;
color: #ffffff;
border-radius: 4px;
font-size: 14px;
}
/* 气泡的三角箭头，使用::after实现 */
.tooltip::after {
content: "";
position: absolute;
top: 100%; /* 箭头位于气泡底部 */
left: 50%;
transform: translateX(-50%);
border-width: 6px;
border-style: solid;
border-color: #333333 transparent transparent transparent; /* 只保留上边框颜色，其余透明 */
}
3. 制作特殊边框或背景效果
可以通过伪元素实现元素的多层边框、渐变背景叠加等效果，避免修改原有元素的盒模型属性。
/* 实现双层边框效果 */
.double-border {
position: relative;
width: 200px;
height: 100px;
background-color: #ffffff;
border: 1px solid #cccccc;
}
/* 外层边框用::before实现 */
.double-border::before {
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
border: 1px solid #1890ff;
border-radius: 2px;
pointer-events: none; /* 避免伪元素影响鼠标事件 */
}
4. 清除浮动影响
在父元素没有设置固定高度且子元素浮动的情况下，父元素会出现高度塌陷，使用::after可以清除浮动，让父元素正常包裹子元素。
/* 清除浮动的通用类 */
.clearfix::after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
/* 使用示例 */
<div class="parent clearfix">
<div class="child" style="float: left; width: 100px; height: 100px; background: #ff0000;"></div>
</div>
使用注意事项
- 伪元素必须设置
content属性，即使内容为空，否则伪元素不会被渲染。 - ::before和::after插入的伪元素默认是行内元素，如果需要设置宽高，需要手动修改为块级或行内块级元素。
- 伪元素不会出现在DOM树中，因此无法通过JavaScript直接操作，也无法被屏幕阅读器默认读取，不适合添加重要功能性内容。
- 单冒号
:before、:after是CSS2的语法，双冒号::before、::after是CSS3的语法，为了区分伪元素和伪类，推荐使用双冒号写法，如果需要兼容旧版浏览器可以使用单冒号。