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

效果展示

实现原理

利用伪元素通过 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;
}