CSS3 transition: after pseudo-elements, transition to the main transition point awaits

Question

I have a simple problem: if I attach the css transition to the pseudo-element (: after ,: before) and the main element, the animation of the pseudo-element waiting for the animation of the main element to finish. I want to do both animations at the same time. I have this problem only in Chrome (54.0.2840.99) in FireFox (50.0.1), this is good.

This script shows 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 the help.

Answer 1

, transition ( all), , Chrome. Firefox, .

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*/
}

js.fiddle . , .

Answer 2

all, 2 . color margin psuedo-elements

body {
  text-align: center;
}

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

a:hover {

  color: blue;
}

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

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

a:hover::before {
  margin-right: 2px;
}

a:hover::after {
  margin-left: 2px;
}

<a href="#">Hello world!</a>

Hide result