在悬停时是否有更有效的方法使背景位置从左向右变化？

Question

这是我目前必须使代码看起来好像左边框在悬停时扩展，即使它只是背景改变。有没有更有效的方法来编写这段代码？

编辑：高效意味着更好的写作方式。

span {
  padding: 5px;
  text-align: center;
  border-left: 5px solid black;
  background: linear-gradient(to left, yellow 50%, black 50%);
  background-size: 200%, 100%;
  background-position: right;
  transition: .5s ease;
}

span:hover {
  background-position: left;
  color: white;
}

<span>This is some example text.</span>

Answer 1

我更喜欢将伪元素用于此内容，因为您可以将变换等添加到伪元素中以获得更好的性能。

唯一的问题是你需要将span包装在另一个元素中，这样你就可以使用z-index将文本放在伪元素上。否则它只会覆盖你的文字。

span {
  color: black;
  transition: color .5s ease;
  z-index: 2;
  position: relative;
}

p {
  padding: 5px;
  text-align: center;
  border-left: 5px solid black;
  background-color: yellow;
  position: relative;
  overflow: hidden;
  display: inline-block;
}

p::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: black;
  transition: transform .5s ease;
  transform: translateX(-100%);
  will-change: transform;
  z-index: 1;
}

p:hover::after {
  transform: translateX(0);
}

p:hover span {
  color: white;
}

<p><span>This is some example text.</span></p>