如何用CSS实现伪类下划线hover时从下到上滑入变粗效果？

实现方案 #

只需要对你的现有代码做少量调整即可实现从下到上延展的效果，修改逻辑如下：

• 给a标签添加底部内边距，预留下划线的展示空间，避免下划线变粗后和文字重叠
• 给::after伪元素添加绝对定位规则，锚定在a标签的底部，此时高度增加的方向就会变成从下往上延伸

修改后的完整代码如下：

a {
  text-decoration: none;
  color: teal;
}

a {
  display: inline-block;
  position: relative;
  /* 预留下划线展示空间，值大于hover时的下划线高度即可 */
  padding-bottom: 0.6rem;
}

a::after {
  content: "";
  display: block;
  height: 0.1rem;
  /* 固定在父元素底部，宽度和父元素保持一致 */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: rotate(0.5deg);
  background-color: #20c997; /* teal */
  opacity: 0.3;
  transition: height 0.3s;
}

a:hover::after {
  height: 0.5rem;
}

内容的提问来源于stack exchange，提问作者Your Josh