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

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>

Tags:

Css

Pseudo Element

Css Transitions

Related