nbsp nbsp - 9 days ago 5
CSS Question

CSS3 transition of :after pseudoelements wait to main item transition end

I have simple problem: If I attach css transition to pseudoelement (:after, :before) and main item, animation of pseudoelement waiting to end of animation of main item. I want do both animation simultaneously.
I have this problem only in Chrome (54.0.2840.99) in FireFox (50.0.1) its behave fine.

This fiddle showing the problem:
https://jsfiddle.net/CptCrunch/wtse7e8b/1

body {
text-align: center;
}

a {
font-size: 50px;
font-weight: 800;
color: red;
text-decoration: none;
transition: all 1s linear 0s;
}

a:hover {

color: blue;
}

a::before {
content: "\0005B";
margin-right: 30px;
transition: all 1s linear 0s;
}

a::after {
content: "\0005D";
margin-left: 30px;
transition: all 1s linear 0s;
}


Is there any way to fix this? Thanks for help.

Answer

It seems if you set the specific transition values for each of the elements (instead of using all) it behaves as you are intending in Chrome. I tested Firefox and it still works fine there as well.

a {
  font-size: 50px;
  font-weight: 800;
  color: red;
  text-decoration: none;
  transition: color 1s linear 0s; /*set color only*/
}

a:hover {
  color: blue;
}

a::before {
  content: "\0005B";
  margin-right: 30px;
  transition: margin 1s linear 0s; /*set margin only*/
 }

a::after {
  content: "\0005D";
  margin-left: 30px;
  transition: margin 1s linear 0s; /*set margin only*/
}

I have updated your js.fiddle here. Hope that helps.