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

Question

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

Codepen

http://codepen.io/stroperik/pen/ByJjmR

HTML

<ul>
  <li><span>Hem</span></li>
  <li><span>Tjänster</span></li>
</ul>

scs

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%;
}

提前感谢

Answer 1

看起来像Firefox怪癖（？），但显然它需要伪元素:after在这种情况下定位：

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);
}

我还要补充一点，设置这样的"边界"理想情况下无论如何都需要将:after相对于其父span定位，因为它允许轻松设置必要的偏移。

演示：http://codepen.io/anon/pen/yypeEx