Why is there a delay for the transition of my pseudo elements?

user_10289265 0
Viewed 474

I need to animate both of the element and its pseudo element.

Then I noticed, when I hover, everything is fine. But then I stop hovering, the Home animates first and after that, the pseudo element Link starts animating.

Why it behaves like this? Is there a way to make them animate simultaneously?

Here's a simplified recreation of my problem:

a {
  color: blue;
  transition: all 1s;
  text-decoration: none;
}

a:hover {
  color: red;
  font-size: 48px;
}

a:hover::before {
  color: green;
  font-size: 32px;
}

a::before {
  content: 'Link:';
  transition: all 1s;
}
<a href="javascript: void(0)">Home</a>

I'm using MacOS with Chrome Version 83.0.4103.97 (Official Build) (64-bit)

If you can't reproduce the problem, here's a screengrab of it:

glitch

css-transitions pseudo-element css
3 Answers

I also assigned the default values ​​to ::before and works fine. I think it trying to inherit the default values and it's confusing.

a {
  color: blue;
  transition: all 1s;
  text-decoration: none;
}

a:hover {
  color: red;
  font-size: 48px;
}

a::before {
  content: 'Link:';
  transition: all 1s;
  font-size: 1rem;
  color: blue;
}

a:hover::before {
  color: green;
  font-size: 32px;
}
<a href="javascript: void(0)">Home</a>

user_106987410

Because there is no default font-size for the pseudo element so the pseudo element will inherit the font-size of the a. Here is what is happening:

  1. we initially have both element at font-size X (X is based on your other properties, 16px here)
  2. On hover the pseudo element will have 32px and a will have 48px
  3. when you unhover (and here is the trick) the pseudo element will inherit for a moment the font-size of the a (48px) so your transition will be from 32px to 48px - y where y is changing du to the transition applied to a until the 48px - y is back to X

Same logic apply with coloration because it's also inherited. Simply set a default font-size and color

a {
  color: blue;
  transition: all 1s;
  text-decoration: none;
}

a:hover {
  color: red;
  font-size: 48px;
}

a:hover::before {
  color: green;
  font-size: 32px;
}

a::before {
  content: 'Link:';
  transition: all 1s;
  font-size:16px;
  color:blue;
}
<a href="javascript: void(0)">Home</a>

user_86203330

I found a solution on mouseover it's a bit ugly but at least it's working smoothly

a {
  color: blue;
  transition: all 1s;
  text-decoration: none;
}

a::before {
  content: 'Link:';
/*   transition: all 1s; */
}
a:hover {
  color: red;
  font-size: 48px;
}
a:hover::before {
  transition: all 1s;
  color: green;
  font-size: 32px;
}
<a href="javascript: void(0)">Home</a>

user_135680990
Related