Width transitions on ::after pseudo-element not working in Edge

Question

I'm using CSS transitions on the ::after pseudo-element and it's working perfectly fine in Chrome and Firefox; however, it's not working as expected in Edge. The background color transition is working on the pseudo-element, but the width isn't.

Here's my current code: http://codepen.io/anon/pen/ZbYKwv?editors=110

For the purpose of being able to see the transition clearly, I increased the duration from 400 ms to 4000 ms. I also added a white background to the <label> because Edge doesn't seam to support a data URI SVG for a background image (I'm actually using a file, but I can't upload that to CodePen).

So what can I do to make the width of the pseudo-element animate as expected on Edge?

Answer 1

Try by adding the prefixes for all browsers at the transition rule:

-webkit-transition: all 4000ms ease;
-moz-transition: all 4000ms ease;
-ms-transition: all 4000ms ease;
-o-transition: all 4000ms ease;
transition: all 4000ms ease;

This should transition work on every browser.

Besides that, you can try to specify a width value for the nav when the #nav-toggle is checked, even if it is the same value given for .nav.

IE and FF often have issues with transitions with max-width/height.