时间戳

首页 > 解决方案 > 你能把一个字体很棒的图标放在一个之前，它已经在选择器上有一个 ::before 类吗？

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

问题描述

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

我注意到

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>

标签： htmlcsstransition

解决方案

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

这是一个使用渐变的想法：

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

推荐阅读