How can I style the first letter and apply this linear gradient animation?

Question

I have some code using background-position and a linear-gradient in order to create a swiping right animation when you hover the text.

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>

I want to combine this with the ability to color the first letter of my element so that the first letter is colored then on hover the rest is colored.

I used the ::first-letter pseudo-element and was able to change the color to purple that way:

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

<div>Foo</div>

But, when I combine these, the linear-gradient always wins out and sits on top of my color. I could change the background-position on the div until it only shows color on the first letter, but then the solution only works for that specific letter because I'm not using a monospace font.

Here is my attempt at combining them:

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>

As an aside, I'm incorporating this using styled-components. Any ideas would be much appreciated!

Hi @yunzen, I just figured it out and posted the combination below as an answer. I needed to use `color` instead of `webkit-text-fill-color`. Thank you! — giraffesyo, Feb 20 '19 at 10:25
Thank you, that's why I put my solution as an answer @yunzen. — giraffesyo, Feb 20 '19 at 10:33
@yunzen Thanks for your feedback! I've added the original combination to this post. — giraffesyo, Feb 20 '19 at 10:43

score 1 · Accepted Answer · answered Feb 20 '19 at 10:21

1

Got it working as such! I just needed to stop using -webkit-text-fill-color and use normal color. This answer pointed me in the right direction.

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>

answered Feb 20 '19 at 10:21

giraffesyo

4,860
1
29
39

hmm . so I didn't get the question well – Temani Afif Feb 20 '19 at 10:25
@TemaniAfif Basically I wanted it to be purple on the first letter, and the rest black, then change to all purple on hover. I'm sorry I didn't make it very clear. – giraffesyo Feb 20 '19 at 10:26

score -1 · Answer 2 · answered Feb 20 '19 at 10:05

-1

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

<div>Foo</div>

answered Feb 20 '19 at 10:05

Gaurav Bhardwaj

328
2
8

Thanks for your answer! This isn't quite what I was looking for but I gave you an upvote because I think the idea of using `not` was clever here. I wasn't able to get it working with your example but I posted an answer with my solution. Welcome to Stack Overflow! – giraffesyo Feb 20 '19 at 10:22

How can I style the first letter and apply this linear gradient animation?

2 Answers2