有没有办法在图标下添加垂直线而无需创建另一个div？

Question

我试图在图标下方添加一条垂直线，但我似乎无法显示该线，而无需创建额外的 div 来将图标类包装在其中。我试图让我的图标看起来像这样

此 CSS 不适用于此 HTML。

HTML：

<i class="fa-solid fa-x"></i>

CSS：

fa-x::before { 
    content: "";
    position: absolute;
    height: calc(100% + 20px);
    width: 3px;
    background: #ff6347;
    margin-top: 32px;
    margin-left: 6px;
}

但是如果我将 HTML 和 CSS 更改为如下所示，我可以看到这一行：

HTML：

<div class="name">
    <i class="fa-solid fa-x"></i>
</div>


name::before { 
    content: "";
    position: absolute;
    height: calc(100% + 20px);
    width: 3px;
    background: #ff6347;
    margin-top: 32px;
    margin-left: 6px;
}

为什么图标类需要包装在另一个 div 中才能工作？还是我错过了什么？

Answer 1

您当前的解决方案存在两个问题。首先，在你的 CSS 中，你使用的是

name

而不是

.name

，所以你的 CSS 是无效的，这就是它不起作用的原因。其次，

.name

应该是相对位置，以便您可以使用相对于

.name

div 的绝对定位。

.name {
  position: relative;
}
.name::before { 
    content: "";
    position: absolute;
    height: calc(100% + 20px);
    width: 3px;
    background: #ff6347;
    margin-top: 32px;
    margin-left: 6px;
}

<div class="name">
    <i class="fa-solid fa-x"></i>
</div>