悬停时和活动时的粗下划线

Question

我正在尝试制作一个简单的导航菜单，其中包含带有动画下划线的链接，如Tobias Ahlin http://tobiasahlin.com/blog/css-trick-animating-link-underlines/所示

我得到了这个，但是如果列表元素处于活动状态，我无法弄清楚如何立即显示下划线。

欢迎任何帮助，非常感谢！

小提琴：https://jsfiddle.net/131d8q1v/5/

HTML：

<div class="container">
    <ul>
      <li class="active"><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</div>

CSS：

ul {
  list-style-type:none;
}

a {
  position: relative;
  color: #000;
  text-decoration: none;
}

a:visited {
  color: #000;
  text-decoration:none;
}

a:hover {
  color: #000;
  text-decoration:none;
}

a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  bottom: -2px;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

Answer 1

添加此规则：

li.active a:before,
a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

ul {
  list-style-type: none;
}

a {
  position: relative;
  color: #000;
  text-decoration: none;
}

a:visited {
  color: #000;
  text-decoration: none;
}

a:hover {
  color: #000;
  text-decoration: none;
}

a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  bottom: -2px;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

li.active a:before,
a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

<div class="container">
  <ul>
    <li class="active"><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>