::before通过content属性在元素前插入装饰内容，常用于添加图标、符号等视觉元素。必须设置content，可为文本、Unicode、属性值或空值，配合display、position、background等样式实现精确定位与图形效果，如标题图标、自定义列表标记，提升表现力且不污染HTML结构。
CSS伪元素 ::before 可以在目标元素的内容之前插入装饰性内容，无需修改HTML结构。它常用于添加图标、符号、修饰线条等视觉元素，提升页面表现力。
基本语法与content属性
::before 必须配合 content 属性使用，否则不会生效。content 可以是字符串、计数器、属性值或空内容。
常见写法：- 使用文本：content: "★";
- 使用特殊符号（如Unicode）：content: "\2022";（显示为项目符号）
- 插入属性值：content: attr(data-label);
- 仅作图形装饰：content: ""; 配合背景或边框实现图形
设置样式与定位
通过CSS可为 ::before 设置尺寸、颜色、位置等样式，使其更灵活地融入布局。
常用技巧：- 设置 display: inline-block 或 block 以控制布局
- 使用 position: absolute 脱离文档流，精确定位
- 结合 top、left 等调整位置
- 用 background、border、transform 制作图形（如小圆点、箭头、装饰线）
实际应用示例
给标题前加小图标：
立即学习“前端免费学习笔记（深入）”；
h3::before {
content: "➤";
color: #ff6b6b;
margin-right: 8px;
font-size: 14px;
}
创建自定义列表项标记：
li::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
background: #007acc;
border-radius: 50%;
margin-right: 10px;
vertical-align: middle;
}
基本上就这些。合理使用 ::before 能有效增强视觉层次，同时保持HTML简洁。 
