Как я могу оформить первую букву и применить эту линейную градиентную анимацию?

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>

Но, когда я объединяю их, линейный градиент всегда побеждает и сидит поверх моего цвета.Я мог изменить background-position на div, пока он не покажет цвет только для первой буквы, но тогда решение работает только для этой конкретной буквы, потому что я не использую моноширинный шрифт.

Вот моя попытка объединить их:

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>

В качестве отступления, я включаю это с помощью styled-компонентов.Любые идеи будут высоко оценены!

Answer 1

Получилось так!Мне просто нужно было прекратить использовать -webkit-text-fill-color и использовать обычный color.Этот ответ указал мне правильное направление.

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>

Answer 2

div:not(:hover)::first-letter {
    color: #8b73f6;
    background: linear-gradient(to right, red, green);
}

<div>Foo</div>