Animate Pseudo-Class with @keyframes

Asked Feb 12 '20 at 11:44

Active Feb 12 '20 at 11:48

Viewed 25 times

I have the following code:

.link {
  font-family: 'Arial';
  text-transform: Uppercase;
  color: #000;
  text-decoration: none;
  display: inline-block;
}

.link:after {
  content: "";
  display: block;
  padding-top: 3px;
  border-bottom: 2px solid black;
  transform: scaleX(1);
  transition: transform 250ms ease-in-out;
  transform-origin: 0% 50%
}

.link:hover:after {
  transform: scaleX(0);
  transform-origin: 100% 50%;
}

<a href="#" class="link">Some Random Link</a>

I have a simple Animation when I hover over my Link. Basically the Underline slides out to the right, when I hover over the element and slides in from the left when I leave the element.

What I want to have is, that it plays the whole Animation when I'm hovering over the Element. I tried creating an Animation with @keyframes but couldn't get it work, because I don't know how to animate only the Pseudo-Class ::after and not the whole element.

Here's also a JSFiddle to better explain what I'm trying to do: JSFiddle

edited Feb 12 '20 at 11:48

Temani Afif

245,468
26
309
415

asked Feb 12 '20 at 11:44

Florian_W7

check the second snippet of the accepted answer – Temani Afif Feb 12 '20 at 11:48
thanks for showing me that, but it's not exactly how I want it. the underline should be there from the beginning. – Florian_W7 Feb 12 '20 at 11:53
please reopen the question as it is not resolved, and currently I'm not able to comment on other questions! – Florian_W7 Feb 12 '20 at 12:08
I have updated the accepted answer. You can obtain any kind of animation, you simply need to understand how it works and how to adjust the values – Temani Afif Feb 12 '20 at 12:11
alright, thanks a lot! – Florian_W7 Feb 12 '20 at 12:14

Animate Pseudo-Class with @keyframes

0 Answers0