css - 将动画比例链接到右侧

Question

我的 css 文档中有一个链接(“a”标记)，并且我有一个动画，它从链接的中心向两端扩展底部边框。我希望动画从左侧缩放并向右侧拉伸(stretch)

我曾尝试对其进行从负到正的翻译，但看起来并不像我想要的那样。我似乎无法在这里或任何其他网站上找到任何好的文章。

a:link:after
{
    content: "";
    display: block;
    border-bottom: 2px solid white;
    transform: scaleX(0);
    transition: transform .2s ease-out;
}
a:hover:after
{
    transform: scaleX(1);
}

从负到正的转换不会隐藏尚未动画化的边框部分，因此链接左侧只有一个随机边框。

Answer 1

您可以将 translate 属性与 scale 结合使用。

a {
  font-size: 24px;
  text-decoration: none;
  position: relative;
  color: black;
  overflow: hidden;
  display: inline-block;
}

a:after {
  content: "";
  background: black;
  height: 2px;
  transform: translate3d(-100%, 0, 0) scale(0);
  transition: transform .2s ease-out;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

a:hover:after {
  transform: translate3d(0, 0, 0) scale(1);
}

<a href="">LINK</a>