链接内容，背景填充从左到右，然后从右到左，这样看起来盒子在向右滑动

Question

我正在尝试在链接上执行动画，背景应该从左到右填充，然后背景应该反转并从右到左移动。我已经为第一部分创建了一支钢笔：

JSON.parse()

p {
  color: #000;
}

a {
  background: linear-gradient(to right, #903e77 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  color: #000;
  text-decoration: none;
}

a:hover {
  background-position: left bottom;
  transition: background 250ms ease-in-out;
}

我认为这需要一个span元素或里面的东西来充当另一个背景块。

效果类似于此处的链接：

https://ueno.co/contact

在页脚中最引人注目。

Answer 1

您可以像这样调整它：

p {
  color: #000;
  font-size: 40px;
}

a {
  background: linear-gradient(#903e77, #903e77);
  background-size: 200% 100%;
  background-position: 200% 0;
  background-repeat: no-repeat;
  color: #000;
  text-decoration: none;
}

a:hover {
  background-position: -100% 0;
  transition: background 0.5s ease-in-out;
}

<p>This is a sentence with a <a href="">link</a> in the middle.</p>

或者这样：

p {
  color: #000;
  font-size: 40px;
}

a {
  background: linear-gradient(#903e77, #903e77);
  background-size: 0 100%;
  background-position: left;
  background-repeat: no-repeat;
  color: #000;
  text-decoration: none;
  transition: background-size 0.5s,background-position 0s 0.5s;
}

a:hover {
  background-size:100% 100%;
  background-position:right;
}

<p>This is a sentence with a <a href="">link</a> in the middle.</p>

也这样：

p {
  color: #000;
  font-size: 40px;
}

a {
  background: linear-gradient(#903e77, #903e77);
  background-size: 200% 100%;
  background-position: 200% 0;
  background-repeat: no-repeat;
  color: #000;
  text-decoration: none;
  transition:background-position 0.5s;
}

a:hover {
  background-position: -100% 0;
}

<p>This is a sentence with a <a href="">link</a> in the middle.</p>

Answer 2

您可以在链接上使用定位的伪元素，并使用transform

p {
  color: #000;
  font-size: 2em;
}

a {
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: bottom;
}

a:before {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  height: 100%;
  background: pink;
  z-index: -1;
  transform: translateX(-100%);
  transition: transform 1s;
}

a:hover:before {
  transform: translateX(100%);
}

<p>This is a sentence with a <a href="">link</a> in the middle.</p>