::before 选择器在 I 元素上不起作用

Question

我正在尝试将

::before

伪选择器应用到使用 fontawesome 主题的

i

元素。但是，当我使用其父项选择它时，

::before

css 与图标重叠（或者更确切地说，图标本身消失）。

只有在其路径中的任何位置有类选择器时才会发生这种情况：

.foo a i::before {}

；不起作用；

a i::before {}

工作正常。

无效的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;
}

<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>

更改

z-index

也没有任何作用。

唯一有效的方法是直接选择

i

元素。

这是我试图实现的结果的工作示例：

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;
}

<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>

Answer 1

这是一个特殊性问题。

您的

:before

声明将覆盖 FontAwesome 提供的用于创建图标的声明。您不需要重新声明

:before

，只需添加其他样式即可。

position

和

z-indez

也是多余的。

.foo i {
  position: relative;
  color: red;
  font-size: 1em;
}

.foo i::before {
  display: block;
  height: 2em;
  aspect-ratio: 1 / 1;
  background-color: blue;
}

<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>