CODEWITHSUNDEEP
htmlcssfirefoxpseudo-element
Bruno Tavares
Bruno Tavares

Reputation: 462

Transitions on pseudo-elements not working on firefox browser

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!

Upvotes: 2

Views: 641

Answers (1)

Alexander O&#39;Mara
Alexander O&#39;Mara

Reputation: 60527

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.

Upvotes: 2

Related Questions