Css 宽度转换不适用于FF中的：：after

我有这个菜单，我想尝试一些新的动画与悬停状态。问题是宽度转换在Firefox中似乎不起作用，但在Chrome、Safari和IE中却起不了作用。我试过Bourbon mixin和Now，都没有帮助。Firefox是否不能在伪元素上进行CSS转换，或者是什么导致了这个问题

代码笔

HTML 提前感谢

看起来像Firefox的怪癖（？），但显然它需要伪元素

：在本例中定位在

之后：

span {
  text-transform: uppercase;
  font-family: 'Arial';
  font-size: 48px;
  font-weight: bold;
  position: relative;
}
span:after {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  content: '';
  width: 2px;
  height: 5px;
  background: red;
  @include transition(width 0.2s ease);
}

我还要补充一点，设置这样的“边界”在理想情况下需要相对于其父级

span

定位

：after，因为它允许轻松设置必要的偏移量

演示：
似乎你的笔可以用了？@Benjamin它在任何地方都可以用，但Pretox除外。很遗憾我没有检查firefox。所以，我想你的解决方案对你的网站建设来说是最好的。谢谢你快速而有用的回复！我将看看今天晚些时候是否有时间阅读更多关于这方面的内容，并向Moz团队报告。
ul {
  list-style-type: none;
}

li {
  display: inline-block;
  cursor: pointer;
  margin: 0 10px;
}

span {
  text-transform: uppercase;
  font-family: 'Arial';
  font-size: 48px;
  font-weight: bold;
}

span::after {
  display: block;
  content: '';
  width: 2px;
  height: 5px;
  background: red;
  @include transition(width 0.2s ease);
}

span:hover::after {
  width: 100%;
}

span {
  text-transform: uppercase;
  font-family: 'Arial';
  font-size: 48px;
  font-weight: bold;
  position: relative;
}
span:after {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  content: '';
  width: 2px;
  height: 5px;
  background: red;
  @include transition(width 0.2s ease);
}