Question

Im having a problem inside of Chrome only, tested this inside of Opera, FF, Safari and it all works fine.

I know there was a bug with Chrome 17 with transitions on visited links so I even included that thought to be fix

There is still not animation for the transition on hover for border-bottom.

any clues? am I just not seeing something? I’ve read around and it all seems to be talking about the color of the text, while i’m trying to transition in the border-color.

I tried to animate in border-bottom from none to 1px solid #9ecd41 but found that in all browsers except firefox had a funky jagged animation where it kinda bounced.

any help would be awesome, attached is the code i’m working with.

Ok here is my html

  <nav>
    <ul class="nav">
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">SERVICES</a></li>
      <li><a href="#">MEDIA</a></li>
      <li><a href="#">BLOG</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
 </nav>

And here is my CSS

nav {
float: right;
height: auto;
width: auto;
padding: 25px;
}

ul.nav {
width: auto;
height: auto;
overflow: visible;
}

.nav > li {
display: inline-block;
margin-right: 20px;
}

.nav > li:last-child {
margin-right: 5px;     
}



/* non-visited links: Chrome transition bug fix */
.nav > li > a:visited {
color: #ffffff;
letter-spacing: 1px;
text-decoration: none;
display: block;
font-family: "proxima-nova-condensed",sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
font-smooth: always;
-webkit-font-smoothing: antialiased;
padding-bottom: 5px;
border-bottom: 1px solid #333; /* CSS3 transition */

-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
transition: all .2s ease-in;
}

/* visited links: Chrome transition bug fix */
.nav > li > a {
color: #ffffff;
letter-spacing: 1px;
text-decoration: none;
display: block;
font-family: "proxima-nova-condensed",sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
font-smooth: always;
-webkit-font-smoothing: antialiased;
padding-bottom: 5px;
border-bottom: 1px solid #333; /* CSS3 transition */

-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
transition: all .2s ease-in;
}


.nav > li > a:hover {
border-bottom: 1px solid #9ecd41;
}

.nav > li > a:active {
    border-bottom: 1px solid #f96d10;
}

Answer 1

Just styled the <li> the way I would of styled the li with widths/heights/padding/border etc and then just styled the link to fill the li and just styled the links colour and font properties. Chrome has small bug on border-bottom for link transitions