width-transition not working on ::after in FF - css

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