CSS伪元素::before和::after允许开发者在选定元素的前面或后面插入额外的内容或样式，不需要修改HTML结构就能实现很多装饰性效果，是简化页面代码的重要工具。
::before和::after的基本使用规则
这两个伪元素必须配合content属性才能生效，即使不需要插入文本内容，也要设置content: ""，否则伪元素不会被渲染到页面中。默认情况下，::before生成的伪元素会作为目标元素的第一个子元素，::after生成的伪元素会作为目标元素的最后一个子元素，它们默认是行内元素，可以通过display属性修改显示类型。
下面是一个最基础的使用示例，给段落前后分别添加固定文本：
/* 给class为demo的p元素前添加前缀文本 */
p.demo::before {
content: "前缀：";
color: #ff0000;
font-weight: bold;
}
/* 给class为demo的p元素后添加后缀文本 */
p.demo::after {
content: "（后缀）";
color: #666666;
font-size: 12px;
}
content属性的常用取值
content属性支持多种取值类型，满足不同的内容插入需求：
- 字符串：直接插入文本内容，支持转义字符，比如
content: "2714"可以插入对勾符号 - attr()：获取目标元素的属性值作为内容，比如
content: attr(data-tip)可以读取元素的data-tip属性值 - url()：插入外部资源，比如图标图片，
content: url(icon.png) - 计数器：配合
counter()函数实现自动编号，常用于列表序号生成
装饰效果实现案例
案例1：文字下划线装饰
不需要额外添加<span>标签，用::after就能实现自定义的下划线效果，还可以控制下划线的长度和位置：
/* 给链接添加自定义下划线 */
a.custom-link {
position: relative;
text-decoration: none;
color: #333333;
padding-bottom: 5px;
}
a.custom-link::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background-color: #1890ff;
transition: width 0.3s ease;
}
a.custom-link:hover::after {
width: 100%;
}
案例2：卡片边框装饰角
用::before和::after配合可以实现卡片的四个装饰角，常用于信息卡片、提示框的样式设计：
/* 卡片容器样式 */
.card {
position: relative;
width: 300px;
height: 200px;
padding: 20px;
border: 1px solid #e8e8e8;
margin: 20px;
}
/* 左上角装饰 */
.card::before {
content: "";
position: absolute;
left: -2px;
top: -2px;
width: 20px;
height: 20px;
border-left: 2px solid #1890ff;
border-top: 2px solid #1890ff;
}
/* 右下角装饰 */
.card::after {
content: "";
position: absolute;
right: -2px;
bottom: -2px;
width: 20px;
height: 20px;
border-right: 2px solid #1890ff;
border-bottom: 2px solid #1890ff;
}
案例3：列表序号自动生成
结合计数器可以实现自定义的列表序号，比原生<ol>标签的样式更灵活：
/* 定义计数器 */
.list-container {
counter-reset: item-num;
list-style: none;
padding-left: 0;
}
/* 每个列表项递增计数器并插入序号 */
.list-item {
counter-increment: item-num;
padding: 8px 0;
padding-left: 30px;
position: relative;
}
.list-item::before {
content: counter(item-num);
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
background-color: #1890ff;
color: #ffffff;
border-radius: 50%;
font-size: 12px;
}
使用注意事项
- 伪元素生成的内容不会被页面的DOM API获取到，比如
document.querySelector无法选中::before或::after生成的内容 - 伪元素不能直接绑定鼠标事件，比如点击伪元素不会触发目标元素的点击事件，除非把伪元素的
pointer-events设置为none - 如果目标元素是替换元素（比如<img>、<input>），部分浏览器不支持在这类元素上使用::before和::after伪元素
- content属性插入的字符串如果包含特殊字符，需要做对应的转义处理，避免样式解析错误