CSS伪元素::before是CSS中非常实用的一个特性，它允许我们在目标元素的内容前面插入额外的装饰性内容，这些内容不会出现在DOM树中，仅用于视觉展示，不需要额外修改HTML结构就能实现丰富的页面效果。
::before的基本语法规则
::before伪元素需要和::before选择器配合使用，并且必须设置content属性，否则伪元素不会生效。它的基本语法结构如下：
/* 选中目标元素，添加before伪元素 */
.target_element::before {
content: "插入的内容"; /* 必须设置的属性，否则伪元素不显示 */
/* 其他样式属性 */
}
需要注意的是，content是::before伪元素的必需属性，即使不需要插入文本内容，也要设置content: ""，否则伪元素不会被浏览器渲染。
content属性的常用取值
content属性支持多种类型的取值，我们可以根据不同的装饰需求选择合适的取值方式：
- 字符串：直接插入文本内容，比如
content: "前缀：" - attr()：获取目标元素的某个属性值作为插入内容，比如
content: attr(data-tip) - url()：插入外部资源，一般是小图标，比如
content: url(icon.png) - 计数器：配合
counter()函数实现自动编号，常用于列表序号装饰
字符串取值示例
如果我们想给所有提示类文字前面加一个感叹号标识，可以这样实现：
.tip::before {
content: "！";
color: #ff4d4f;
margin-right: 6px;
font-weight: bold;
}
对应的HTML结构只需要写<span class="tip">这是一条提示信息</span>，页面上就会显示红色的感叹号加提示内容的效果。
attr()取值示例
如果我们需要给链接后面显示它的跳转地址，就可以用attr()获取href属性：
a::after {
content: "(" attr(href) ")";
font-size: 12px;
color: #666;
margin-left: 4px;
}
当HTML是<a href="https://ipipp.com/guide">查看指南</a>时，页面会显示「查看指南(https://ipipp.com/guide)」的效果。
常见装饰场景实现
添加前置图标
给导航菜单项前面加小图标是常见需求，不需要额外添加<img>标签，用::before就能实现：
.nav_item::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-image: url(menu_icon.png);
background-size: cover;
margin-right: 8px;
vertical-align: middle;
}
实现自定义列表序号
默认的列表序号样式比较单一，用::before配合计数器可以实现自定义样式的序号：
/* 初始化计数器 */
.custom_list {
counter-reset: list_num;
list-style: none;
padding-left: 0;
}
.custom_list li::before {
counter-increment: list_num; /* 每次递增计数器 */
content: counter(list_num) ".";
color: #1890ff;
font-weight: bold;
margin-right: 8px;
font-size: 16px;
}
添加分割线装饰
给标题两侧加分割线，也可以用::before实现单侧或者双侧的分割效果：
.title::before {
content: "";
display: inline-block;
width: 40px;
height: 2px;
background-color: #1890ff;
vertical-align: middle;
margin-right: 12px;
}
使用注意事项
- ::before插入的内容不属于DOM节点，无法通过JavaScript直接操作，只能通过CSS控制样式
- 伪元素默认是行内元素，如果需要设置宽高，需要手动设置
display: inline-block或者display: block - IE8及以下版本只支持单冒号
:before写法，如果需要兼容旧浏览器，可以同时写单冒号和双冒号形式 - 不要滥用::before插入大量内容，它仅适合装饰性内容，功能性内容还是应该放在HTML结构中
提示：如果需要插入的内容在页面中有实际语义，比如重要的提示文本，不建议用::before实现，避免屏幕阅读器等辅助工具无法识别内容。