CSS的::before和::after伪元素属于虚拟元素，不需要在HTML结构中新增额外节点，就能在指定元素的前面或后面插入自定义内容，是简化样式开发的重要工具。这两个伪元素的核心依赖content属性，只有设置了content属性，伪元素才会生效。
::before和::after伪元素的基本使用规则
::before伪元素会在选中元素的内容之前插入生成的内容，::after伪元素则会在选中元素的内容之后插入生成的内容。两者默认是行内元素，需要通过display属性修改显示类型才能设置宽高。
基本使用语法如下：
/* 选中类名为box的元素，在其内容前插入内容 */
.box::before {
content: "前置内容";
/* 默认是行内元素，修改为块级元素可以设置宽高 */
display: inline-block;
color: #ff0000;
}
/* 选中类名为box的元素，在其内容后插入内容 */
.box::after {
content: "后置内容";
display: inline-block;
color: #0000ff;
}
content属性的常见取值
- 字符串：直接插入文本内容，支持转义字符，比如换行符A需要配合white-space: pre使用。
- none：不生成任何内容，用来隐藏伪元素。
- attr(属性名)：获取选中元素的指定属性值作为插入内容。
- url(资源路径)：插入图片、图标等外部资源。
- 计数器：配合counter-increment和counter属性实现序号插入。
实用内容插入技巧
1. 插入图标或装饰元素
不需要额外添加<span>等标签，直接用伪元素插入小图标或者装饰线条，减少DOM节点数量。
/* 给链接前添加箭头图标 */
.link::before {
content: "→";
margin-right: 8px;
color: #666;
}
/* 给标题后添加装饰线条 */
.title::after {
content: "";
display: block;
width: 100%;
height: 2px;
background-color: #eee;
margin-top: 10px;
}
2. 插入元素属性值
通过attr()函数可以获取元素的自定义属性内容，插入到伪元素中，适合展示提示信息、标签内容等场景。
/* HTML结构：<div class="user" data-role="管理员">张三</div> */
.user::after {
content: "(" attr(data-role) ")";
margin-left: 5px;
font-size: 12px;
color: #999;
}
3. 实现列表序号自定义
结合计数器属性，可以自定义列表的序号样式，比原生的list-style属性更灵活。
/* 初始化计数器 */
.list {
counter-increment: item;
}
/* 插入自定义序号 */
.list li::before {
content: counter(item) ".";
margin-right: 10px;
color: #ff6600;
font-weight: bold;
}
4. 清除浮动
经典的清除浮动技巧就是利用::after伪元素插入空内容，再设置clear属性，避免父元素高度塌陷。
/* 清除浮动的通用类 */
.clearfix::after {
content: "";
display: block;
clear: both;
}
注意事项
- 伪元素必须要有content属性，即使内容为空也需要写content: ""，否则伪元素不会生效。
- ::before和::after伪元素插入的内容不在DOM树中，无法通过JavaScript直接操作，也无法被屏幕阅读器默认读取。
- 伪元素选择器的优先级和对应的元素选择器一致，比如div::before的优先级等于div选择器的优先级。
- 如果需要在伪元素中插入HTML标签，是无法直接实现的，content属性只支持文本、属性值、资源路径等，不支持解析HTML标签。