css - 是否有导航栏下方带有条纹的术语？

Question

我想知道是否有一个术语可以描述那些在其下方有纯色条纹并在悬停时有动画效果的导航栏。我觉得看着很舒服。

当前使用:https://steelseries.com/ http://prntscr.com/bvaz2u

它使用任何 Javascript 吗？容易制作吗？

Answer 1

尽管这是重复的，但这是一个仅 CSS 的解决方案:

.navbar {
  max-height: 50px;
}

.navbar-nav>li:after {
  content: '';
  display: block;
  border-bottom: 5px solid transparent;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  transition: ease .25s;
}

.navbar-nav>li:hover:after {
  border-bottom: 5px solid #E74C3C;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

工作代码笔示例:

http://codepen.io/charliebeckstrand/pen/YWaWzp

要回答您的问题，JavaScript 不一定是，而且我认为它没有官方术语。不过，“动画边框底部”是一个恰当的描述。