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

【问题标题】：Thick underline when hover AND when active悬停和活动时的粗下划线
【发布时间】：2017-12-23 03:52:19
【问题描述】：

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

我可以让它工作，但是如果列表元素处于活动状态，我无法弄清楚如何让下划线立即可见。

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

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);
}

【问题讨论】：

标签： html css hover underline

【解决方案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>

【讨论】：