Ширина перехода не работает на:: после в FF

Question

У меня есть это меню, в котором я хочу попробовать новую анимацию в состоянии наведения. Проблема в том, что переход ширины не работает в Firefox, но в Chrome, Safari и IE. Я пробовал как с миксином Бурбон, так и без, без помощи. Разве 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