Css 宽度转换：在伪元素未在边缘中工作后

我在

：pseudo元素之后使用CSS转换，它在Chrome和Firefox中工作得非常好；然而，在Edge中，它并没有像预期的那样工作。背景色转换对伪元素有效，但宽度无效

以下是我当前的代码：

为了能够清楚地看到转换，我将持续时间从400毫秒增加到4000毫秒。我还向
添加了白色背景，因为Edge不支持背景图像的数据URI SVG（我实际上使用的是一个文件，但我无法将其上传到CodePen）

那么，如何才能使伪元素的宽度在边缘上按预期设置动画？
尝试在过渡规则处为所有浏览器添加前缀：

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

这应该适用于每个浏览器

除此之外，当选中
#nav toggle
时，您可以尝试为nav指定
宽度
值，即使该值与为
.nav
给定的值相同

IE和FF通常在最大宽度/高度的过渡方面存在问题