FontAwesome图标i元素的::before伪选择器带类路径失效问题

尝试给使用FontAwesome的<i>元素添加::before伪样式时，通过包含父类选择器的路径（比如.foo i::before）选择时，图标会消失或被自定义样式覆盖；但仅用a i::before或直接i::before选择时能正常显示，调整z-index也无效。

失效代码示例 #

CSS #

.foo i {
  position: relative;
  color: red;
  font-size: 1em;
  z-index: 5;
}
.foo i::before {
  content: '';
  position: absolute;
  height: 2em;
  aspect-ratio: 1 / 1;
  background-color: blue;
  z-index: -5;
}

HTML #

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet"/>
<a href="" class="foo">
  <i class="fa-solid fa-chevron-right"></i>
</a>

预期效果的正常代码示例 #

CSS #

i {
  position: relative;
  color: red;
  font-size: 1em;
  z-index: 5;
}
i::before {
  content: '';
  position: absolute;
  height: 2em;
  aspect-ratio: 1 / 1;
  background-color: blue;
  z-index: -5;
}

HTML #

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet"/>
<a href="" class="foo">
  <i class="fa-solid fa-chevron-right"></i>
</a>

问题原因与解决办法 #

原因 #

FontAwesome的图标是通过<i>元素的::before伪元素渲染的，它的核心CSS选择器为.fa-solid::before这类类选择器+伪元素的组合。

当你使用.foo i::before时，这个选择器是类选择器+元素选择器+伪元素，优先级比FontAwesome自带的选择器更高。你设置的content: ''会直接覆盖FontAwesome图标的content值（比如代表右箭头的\f054），导致图标消失。

而直接用i::before时，选择器优先级（元素+伪元素）低于FontAwesome的类选择器优先级，所以FontAwesome的content会保留，你的背景、定位等样式可以正常叠加，因此图标能显示。

解决办法 #

方法1：使用另一个伪元素做装饰（推荐）

避免修改FontAwesome依赖的::before，改用::after伪元素添加背景等装饰：

.foo i {
  position: relative;
  color: red;
  font-size: 1em;
  z-index: 5;
}
/* 用::after替代::before，不干扰FontAwesome的图标渲染 */
.foo i::after {
  content: '';
  position: absolute;
  height: 2em;
  aspect-ratio: 1 / 1;
  background-color: blue;
  z-index: -5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 让背景居中对齐图标 */
}

方法2：避免覆盖content属性

如果一定要用::before，去掉自定义的content属性，只保留需要的样式（但这种方式可能导致样式叠加冲突，不如方法1稳妥）：

.foo i {
  position: relative;
  color: red;
  font-size: 1em;
  z-index: 5;
}
.foo i::before {
  /* 不要设置content，保留FontAwesome的content值 */
  position: absolute;
  height: 2em;
  aspect-ratio: 1 / 1;
  background-color: blue;
  z-index: -5;
}

内容的提问来源于stack exchange，提问作者Hazrd