在FF之后的宽度转换不起作用

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>

SCSS

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