宽度转换在 FF 中的 ::after 上不起作用答案

【问题标题】：width-transition not working on ::after in FF宽度转换在 FF 中的 ::after 上不起作用
【发布时间】：2015-02-10 17:51:10
【问题描述】：

我有这个菜单，我想在悬停状态下尝试一些新的动画。问题是宽度转换似乎在 Firefox 中不起作用，但在 Chrome、Safari 和 IE 中起作用。我已经尝试过波旁混合和没有，没有帮助。 Firefox 是否无法在伪元素上进行 CSS 过渡或可能导致问题的原因？

代码笔

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

提前致谢

【问题讨论】：

你的笔好像在用？
@Benjamin 它可以在任何地方使用，但 Forefox 除外。
那太糟糕了，我没有用 Firefox 检查。所以我猜你的解决方案最适合构建你的网站。

标签： css sass bourbon

【解决方案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

【讨论】：

感谢您的快速而有用的回复！我会看看今天晚些时候我是否有时间阅读更多关于这方面的信息并向 Moz 团队报告。