使用::before伪元素可高效为列表项添加自定义图标。1. 基本语法：通过content属性插入字符，如li::before{content:"• ";color:#007acc}实现小圆点；2. 使用Font Awesome字体图标时需引入CDN，并在content中用转义Unicode表示图标，如content:"\f00c"，同时设置font-family:"Font Awesome 5 Free"和font-weight:900以正确显示；3. 可通过font-size、margin、vertical-align等属性优化图标样式，确保与文本对齐美观。该方法无需修改HTML，灵活且易于维护，适合初学者掌握CSS生成内容技巧。
在CSS初级项目中，想为列表项添加自定义图标，使用 ::before 伪元素是一个简单又高效的方法。它不需要修改HTML结构，仅通过CSS就能在每个列表项前插入图标或符号。
1. 基本语法：使用 ::before 插入内容
伪元素 ::before 可以在选中元素的**内容前面**插入生成的内容。结合 content 属性，可以添加字符、符号或图标。
例如，为无序列表的每一项添加小圆点图标：li::before {
content: "• ";
color: #007acc;
font-weight: bold;
margin-right: 8px;
}2. 使用字体图标（如 Font Awesome）
如果想用更丰富的图标，可以引入字体图标库，比如 Font Awesome，并通过其提供的 Unicode 字符来显示图标。
步骤如下：- 在HTML中引入 Font Awesome CDN
- 在CSS中使用对应的 content 值（注意加上反斜杠转义）
<!-- 引入 Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<p>/<em> CSS 中使用 </em>/
li::before {
content: "\f00c"; /<em> Font Awesome 的对勾图标 </em>/
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: green;
margin-right: 10px;
display: inline-block;
}3. 自定义样式提升视觉效果
你可以通过CSS进一步美化图标，比如调整大小、颜色、间距等。
立即学习“前端免费学习笔记（深入）”；
常用属性包括：- font-size：控制图标大小
- margin：设置与文字的间距
- vertical-align：对齐图标和文本
- color：设置图标颜色
li::before {
content: "★";
color: gold;
font-size: 14px;
margin-right: 6px;
vertical-align: middle;
}基本上就这些。用 ::before 添加列表图标灵活又简洁，适合新手快速实现个性化列表样式，关键是掌握 content 和 font-family 的配合使用。不复杂但容易忽略细节，比如字体权重或转义字符。
