CSS底部边框悬停效果：实现激活链接边框持久显示

嗨，我来帮你搞定这个需求！你想要实现的是：链接在悬停时显示2px底部边框，而当用户处于该链接对应的激活页面时，这个边框要一直保留，不会在悬停结束后消失。咱们只需要对现有CSS做一点小修改就能实现。

修改后的完整代码 #

CSS 部分

/* underline link on div*/
a { text-decoration: none; }
.cool-link {
  display: inline-block;
  color: #000;
  text-decoration: none;
}
.cool-link::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: #DE591B;
  transition: width .3s;
}
/* 新增：让激活状态的链接永久显示下划线 */
.cool-link .active::after {
  width: 100%;
}
.cool-link:hover::after {
  width: 100%;
  //transition: width .9s;
}

HTML 部分（无需修改，确保active类正确绑定即可）

<div class="col-xs-6 cool-link">
  <a href="#" class="active" id="login-form-link">Login</a>
</div>
<div class="col-xs-6 cool-link">
  <a href="#" id="register-form-link">Register</a>
</div>

实现原理 #

• 原来的CSS仅通过:hover伪类触发下划线的宽度变化，现在我们新增了针对.active类的规则，直接把伪元素::after的宽度设为100%，这样只要链接带有.active类，下划线就会一直显示。
• 因为保留了transition: width .3s的过渡效果，所以当.active类被添加或移除时，下划线会平滑地出现或消失，交互体验更自然。

小提示 #

记得在页面切换时，给当前页面对应的链接正确添加/移除.active类哦（比如用户在登录页面时，Login链接保留active类；切换到注册页面时，把这个类移到Register链接上）。

内容的提问来源于stack exchange，提问作者Daniele Pais