css - 我如何设置第一个字母的样式并应用此线性渐变动画？

Question

我有一些使用 background-position 和 linear-gradient 的代码，以便在您将鼠标悬停在文本上时创建向右滑动的动画。

div {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient( to right, #8b73f6, #8b73f6 50%, #000 50%);
  background-size: 200% 100%;
  background-position: 100%;
  font-size: 1.5rem;
  display: inline-block;
  transition: all 0.3s cubic-bezier(0, 0, 0.23, 1);
}

div:hover {
  background-position: 0%;
}

<div>Baz</div>

我想将它与为我的元素的第一个字母着色的能力结合起来，以便第一个字母被着色，然后在悬停时其余字母被着色。

我使用了 ::first-letter 伪元素，并且能够通过这种方式将颜色更改为紫色:

  div::first-letter {
    color: #8b73f6;
  }

<div>Foo</div>

但是，当我组合这些时，线性渐变总是胜出并位于我的颜色之上。我可以更改 div 上的 background-position 直到它只在第一个字母上显示颜色，但随后该解决方案仅适用于该特定字母，因为我没有使用等宽字体。

这是我尝试将它们结合起来的尝试:

div {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient( to right, #8b73f6, #8b73f6 50%, #000 50%);
  background-size: 200% 100%;
  background-position: 100%;
  font-size: 1.5rem;
  display: inline-block;
  transition: all 0.3s cubic-bezier(0, 0, 0.23, 1);
}

div::first-letter {
  color: #8b73f6;
}

div:hover {
  background-position: 0%;
}

<div>Bar</div>

顺便说一句，我正在使用样式化组件将其合并。任何想法将不胜感激!

Answer 1

它就这样工作了!我只需要停止使用 -webkit-text-fill-color 并使用正常的 color。这answer为我指明了正确的方向。

div {
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient( to right, #8b73f6, #8b73f6 50%, #000 50%);
  background-size: 200% 100%;
  background-position: 100%;
  font-size: 1.5rem;
  display: inline-block;
  transition: all 0.3s cubic-bezier(0, 0, 0.23, 1);
}

div::first-letter {
  color: #8b73f6;
}

div:hover {
  background-position: 0%;
}

<div>Foo</div>