This post was updated 367 days ago and some of the ideas may be out of date.

当鼠标移入一个元素时，元素底部从左到右出现一个线条占满整个元素的长度。当鼠标移开后，线条继续向右移动直到消失。

效果展示

实现原理

利用伪元素通过 transform-origin 和 transform 的 scaleX 的变化来达到这种效果。

代码实现

示例代码，仅供参考

HTML部分

<h2>This is a Button</h2>

CSS部分

h2 {
  position: relative;
  display: inline;
}

h2::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #000;
  transform-origin: bottom right;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

h2:hover::before {
  transform-origin: bottom left;
  transform: scaleX(1);
}

举一反三

假如要实现从右往左呢？只需要将 transform-origin 中的第二个值写反即可。

修改如下，其他均不变。

h2::before {
  transform-origin: bottom left;
}

h2:hover::before {
  transform-origin: bottom right;
}

实现元素hover效果：从左出现从右离开的下划线

oyiso.cn/315.html

作者

神秘布偶猫

发布于

Apr 25, 2023

更新于

Jun 12, 2025

版权协议