悬停时和活动时粗下划线

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>