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

Question

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

由于我对检查元素一无所知，您能否向我解释一下如何实现此效果？

Answer 1

每个项目都有一个附加的.uiLinkBar div，其宽度是使用链接上的: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>