Переход CSS3: после псевдоэлементов ждать до основного пункта перехода конец

Question

У меня есть простая проблема: если я присоединяю переход css к псевдоэлементу (: after,: before) и основному элементу, анимация псевдоэлемента, ожидающая окончания анимации основного элемента. Я хочу сделать обе анимации одновременно. У меня эта проблема только в Chrome (54.0.2840.99) в FireFox (50.0.1).

Эта скрипка показывает проблему: 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; 
} 

Есть ли способ исправить это? Спасибо за помощь.

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

У меня есть updated your js.fiddle here. Надеюсь, это поможет.

Answer 2

Не используйте all, где он переводит переход на 2 различных преобразования. использовать color для якоря и margin для псевдопользователей-элементов

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>