width-transition not working on ::after in FF

Question

I have this menu that I want to try some new animation with on the hover state. The problem is that the width transition doesn't seem to work in Firefox, but in Chrome, Safari and IE. I've tried with both Bourbon mixin and without, no help. Is Firefox not capable of having CSS transitions on pseudo elements or what could cause the problem?

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

Thanks in advance

Answer 1

Looks like Firefox quirk (?), but apparently it needs pseudo-element :after to be positioned in this case:

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

I will also add that setting a "border" like this would ideally anyway require positioning of :after relatively to its parent span because it allows setting necessary offset easy.

Demo: http://codepen.io/anon/pen/yypeEx