如何覆盖::before/::after伪元素的CSS content属性值

本方案不涉及CSS优先级、!important指令相关用法，核心实现逻辑是抽离公共样式到通用选择器，仅将图标对应的content属性作为单独可覆盖项。

实现思路 #

先给目标列表的所有列表项::before伪元素统一配置FontAwesome必需的字体、布局、间距等公共样式，仅预留content属性作为可自定义项。后续更换单个列表项图标时，只需要覆盖对应项的content值即可，无需重复编写字体相关的冗余代码。

具体实现步骤 #

• 前置准备：确保页面已正确加载对应版本的FontAwesome资源
• 编写列表通用基础样式

/* 清除列表默认自带的项目符号 */
.fa-custom-list {
  list-style: none;
  padding-left: 0;
}

/* 统一配置所有列表项::before的公共属性 */
.fa-custom-list li::before {
  /* FontAwesome必需的字体配置，所有项共用无需重复编写 */
  font-family: "Font Awesome 6 Free"; /* 请替换为你实际使用的FA版本对应字体名 */
  font-weight: 900; /* 免费实心图标对应字重900，常规图标为400，品牌图标需对应更换字体族 */
  /* 布局样式统一配置，保证所有图标对齐 */
  display: inline-block;
  width: 1.5em;
  margin-right: 0.6em;
  text-align: center;
  color: #165DFF;
  /* 配置默认全局图标，可根据需求修改或留空 */
  content: "\f058"; /* 默认显示圆形对勾图标 */
}

• 单独修改指定列表项的图标，仅需覆盖content属性

/* 首页项替换为房子图标 */
.fa-custom-list li.nav-home::before {
  content: "\f015";
}
/* 用户中心项替换为用户图标 */
.fa-custom-list li.nav-user::before {
  content: "\f007";
}
/* 设置页项替换为齿轮图标 */
.fa-custom-list li.nav-setting::before {
  content: "\f013";
}

• 对应HTML结构参考

<ul class="fa-custom-list">
  <li class="nav-home">首页</li>
  <li class="nav-user">个人中心</li>
  <li class="nav-setting">系统设置</li>
  <li>未单独配置图标的项，会显示默认的圆形对勾符号</li>
</ul>

注意事项 #

• font-family取值必须和你加载的FontAwesome版本完全匹配，使用品牌图标时需要将字体族替换为Font Awesome 6 Brands，字重调整为对应值，否则图标会显示为空白方块
• 通用样式和单项目样式的选择器权重保持一致即可，不需要额外加提升权重的声明，后续维护时只需要新增对应类的content值就能完成图标替换，代码冗余度极低

内容的提问来源于stack exchange，提问作者Eric Hepperle - CodeSlayer2010