html - 如何在我的菜单栏上实现这种动画下划线效果？

Question

在此站点上，当您将鼠标悬停在主菜单中的某个元素（白色）上时，黄色下划线开始从左到右。

由于我对检查元素一无所知，您能否向我解释一下如何才能达到这种效果？

标签： htmlcss

Answer 1

每个项目都有一个额外的.uiLinkBardiv，其宽度使用:hover链接上的选择器进行动画处理。

这是从该站点提取的一个最小示例（橙色而不是黄色）。

a.uiLink {
  position: relative;
  padding-bottom: 12px;
  margin-right: 5px;
  text-decoration: none;
  color: #333;
}

a.uiLink:hover {
  color: #000;
}

a.uiLink:hover i.uiLinkBar {
  width: 100%;
}

a.uiLink i.uiLinkBar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 9px;
  background: #ff6600;
  transition: all .3s ease-in-out;
}

<a class="uiLink" href="#">
  Example Link 1
  <i class="uiLinkBar"></i>
</a>
<a class="uiLink" href="#">
  Example Link 2
  <i class="uiLinkBar"></i>
</a>
<a class="uiLink" href="#">
  Example Link 3
  <i class="uiLinkBar"></i>
</a>