html - 你能把一个很棒的字体图标放在一个之前，它已经在选择器上有一个::before 类吗？

Question

我有一个带有 4 个链接的菜单栏。我想要在我的链接之前有一个不同的字体很棒的图标，同时仍然有我的边框悬停效果。似乎当我在元素上放置另一个类或 id 时，超赞字体图标仍然没有生效。我现在想出的唯一解决方案是让每个人都有自己的类(class)，专门针对他们；但这听起来需要更多的代码，而且我相信我仍然可以实现我打算做的事情。

我注意到了

a#home .main-links {
content: "\f101"
visibility: visible doesnt work.
}

所以总结一下我试图实现的目标是将“ICON”放在我的一个链接之前，同时仍然能够使用边框底部过渡。 我也尝试过使用两个类。

a.main-links {
  position: relative;
  cursor: pointer;
  padding: 8px 0;
  color: #66fcf1;
  text-decoration: none;
}

a.main-links:hover {
  color: #45829e;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

a.main-links::before,
a::after {
  content: "";
  position: absolute;
  height: 2px;
  bottom: -2px;
  background: #45829e;
  width: 0%;
}

a.main-links::before {
  left: 0;
  font-size: 16px;
}

a.main-links::after {
  right: 0;
  background: #45829e;
  transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

a.main-links:hover:before {
  background: #45829e;
  width: 100%;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

a.main-links:hover:after {
  background: transparent;
  width: 100%;
  transition: 0s;
}

<ul class="main-ul">
  <li class="main-li">
    <i class="fas fa-home">
            <a id="home" class="main-links">home</a>
    </i>
  </li>
  <li class="main-li">
    <a class="main-links">resume</a>
  </li>
  <li class="main-li">
    <a class="main-links">about</a>
  </li>
</ul>

Answer 1

您可以使用另一种技术进行边框过渡，然后您可以使用伪元素。

这里有一个使用渐变的想法:

.link {
  font-size:30px;
  padding-bottom:2px;
  background-image:linear-gradient(#45829e,#45829e);
  background-position:bottom left;
  background-size:0% 2px;
  background-repeat:no-repeat;
  transition:
   background-size 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
   background-position 0s 0.8s;
}

.link:hover {
  background-position:bottom right;
  background-size:100% 2px;
}

.link:before {
  content:"😃"
}

<span class="link">Text</span>