Transitions on pseudo-elements not working on firefox browser - html

Question

I was expecting this from Internet Explorer, but my beloved Firefox let me down on this one.
This fiddle will not work (at least for me it did not) on Firefox and I would like to know why. I have seen a lot of documentation and I guess this should be working.
Here is the fiddle: http://jsfiddle.net/6UFX7/11300/
HTML:
<div id="nav">
<ul>
<li><a>ENTRY</a></li>
<li><a>ENTRY</a></li>
<li><a>ENTRY</a></li>
<li><a>ENTRY</a></li>
<li><a>ENTRY</a></li>
</ul>
</div>
CSS:
#nav
{
height:60px;
background-color:#FFFFFF;
overflow:hidden;
}
#nav ul
{
color: #f2f2f2;
margin-top:20px;
list-style-type: none;
text-align: center;
float:left;
}
#nav ul li
{
display: inline-block;
*display: inline;
zoom: 1;
margin: 0 10px;
}
#nav ul li a
{
color: #8198A0;
font-style: normal;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.25px;
text-transform: uppercase;
text-decoration: none;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-o-transition: color 0.5s ease;
transition: color 0.5s ease;
}
#nav ul li a:after
{
margin-top:16px;
content: "";
display: block;
height: 5px;
width: 0;
-webkit-transition: width 0.5s ease, background-color 0.5s ease;
-moz-transition: width 0.5s ease, background-color 0.5s ease;
-o-transition: width 0.5s ease, background-color 0.5s ease;
transition: width 0.5s ease, background-color 0.5s ease;
pointer-events:none;
}
#nav ul li a:hover:after
{
width: 100%;
background-color:#8198A0;
}
#nav ul li a:hover
{
cursor: pointer;
}
One more quick question about "pointer-events:none":
It is working fine on Internet Explorer but not on Chrome (I could not test it on Firefox because the above problem).
Thanks in advance!

Answer 1

This appears to be because the #nav ul li a elements are the default display: inline. Adding display: inline-block; to these elements fixes the issue.
Working Example:
#nav
{
height:60px;
background-color:#FFFFFF;
overflow:hidden;
}
#nav ul
{
color: #f2f2f2;
margin-top:20px;
list-style-type: none;
text-align: center;
float:left;
}
#nav ul li
{
display: inline-block;
*display: inline;
zoom: 1;
margin: 0 10px;
}
#nav ul li a
{
color: #8198A0;
font-style: normal;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.25px;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-o-transition: color 0.5s ease;
transition: color 0.5s ease;
}
#nav ul li a:after
{
margin-top:16px;
content: "";
display: block;
height: 5px;
width: 0;
-webkit-transition: width 0.5s ease, background-color 0.5s ease;
-moz-transition: width 0.5s ease, background-color 0.5s ease;
-o-transition: width 0.5s ease, background-color 0.5s ease;
transition: width 0.5s ease, background-color 0.5s ease;
pointer-events:none;
}
#nav ul li a:hover:after
{
width: 100%;
background-color:#8198A0;
}
#nav ul li a:hover
{
cursor: pointer;
}
<div id="nav">
<ul>
<li><a>ENTRY</a></li>
<li><a>ENTRY</a></li>
<li><a>ENTRY</a></li>
<li><a>ENTRY</a></li>
<li><a>ENTRY</a></li>
</ul>
</div>
As for the pointer-events issue, if this does not solve that issue as-well, you should probably ask a question specifically about that.