CSS scaleX 动画错误

Question

问题描述

写一个简单的页面时使用scaleX + 伪元素做一个扩展动画，发现收缩时动画底部有残留

相关代码

@transition-function: cubic-bezier(.4, 0, .2, 1);a:before {
  position: absolute;
  content: '';
  height: 2px;
  background-color: rgba(30, 144, 255, 1.0);
  transition: 200ms @transition-function;
  transform: scaleX(0);
  width: 100%;
  bottom: 0px;
  top: auto;}a:hover {
  &:before {
    transform: scaleX(1);
  }}

情况截图

Chrome 71.0.3569.0
Windows 10 1809(17763.1)

Answer 1

你说的是a标签自带的下划线？那个用text-decoration去掉你是想跟我们玩猜猜看吗？