宽度过渡不适用于 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>

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

我还要补充一点，像这样设置 "border" 无论如何都需要相对于其父级 span 定位 :after，因为它允许设置必要的偏移量。

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

宽度过渡不适用于 FF 中的 ::after

width-transition not working on ::after in FF

css

sass

bourbon

Codepen

HTML

SCSS