css伪元素选择器允许开发者为选中的元素创建额外的虚拟元素，这些虚拟元素不会出现在dom树中，却可以通过样式规则为其设置内容、样式，非常适合用来添加各类装饰性内容，减少不必要的dom节点冗余。
css伪元素选择器基础语法
常用的伪元素选择器有两个，分别是::before和::after，它们会在目标元素的前面或后面创建一个虚拟的子元素。使用伪元素选择器必须配合content属性，否则伪元素不会生效。content属性用来定义插入的内容，支持文本、图片、计数器等多种取值。
基础使用示例：
/* 为所有p元素的前面添加装饰性文本 */
p::before {
content: "提示：";
color: #666;
font-size: 14px;
}
/* 为所有a元素的后面添加一个箭头装饰 */
a::after {
content: "→";
margin-left: 4px;
color: #1890ff;
}
常见装饰内容添加场景
1. 添加文本类装饰
可以在元素前后添加固定的提示文本、标签标识等内容，比如给所有必填的表单输入框前面添加星号标记：
/* 为必填输入框的label前面添加红色星号 */
.required-label::before {
content: "*";
color: #ff4d4f;
margin-right: 4px;
font-weight: bold;
}
2. 添加图形类装饰
除了文本，还可以通过content设置特殊字符、base64编码的小图标，或者结合background属性实现图形装饰。比如给列表项前面添加自定义的圆点：
/* 自定义列表项的前置圆点 */
.custom-list li::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #1890ff;
margin-right: 8px;
vertical-align: middle;
}
3. 添加计数类装饰
伪元素还可以配合counter计数器属性，实现自动编号的装饰效果，比如给章节标题自动添加序号：
/* 定义计数器 */
body {
counter-reset: chapter;
}
/* 每个h2标题前自动添加章节序号 */
h2::before {
counter-increment: chapter;
content: "第" counter(chapter) "章 ";
color: #333;
font-weight: bold;
}
使用伪元素添加装饰内容的注意事项
- 伪元素默认是行内元素，如果需要设置宽高，需要手动修改为
display: block或者display: inline-block。 content属性的值如果是字符串，需要用英文单引号或者双引号包裹，如果需要插入空内容仅做装饰，可以设置content: ""。- 伪元素插入的内容无法被用户选中复制，也不能被搜索引擎直接抓取，因此不要用来添加重要的业务内容。
- 伪元素选择器的语法中，单冒号和双冒号在早期浏览器中有兼容性差异，现代浏览器都支持双冒号写法，推荐使用
::before、::after的写法区分伪元素和伪类。
总结
使用css伪元素选择器添加装饰内容是一种轻量高效的方案，能够减少dom节点的冗余，同时实现丰富的样式效果。开发者只要掌握::before、::after和content属性的配合用法，结合具体场景灵活运用，就能快速实现各类装饰需求，优化页面的开发效率和可维护性。