css underline transitions hover state bouncing my list items

Question

What I'm trying to achieve ---> http://jsfiddle.net/46a8u/

I applied those styles to my css. Problem is my links bounce to the left when hovered. I don't want them to move at all. The only transition I want is for the underline to go from left to right in a hover state. I have a codepen link below showing my issue. Again: I do not want my links(Contact, Behance, LinkedIn) to move, just want the underline to appear from left to right when hovered like how it in jsfiddle link I posted above.

Thanks!

My Codepen http://codepen.io/Chris-Brennan/pen/Gpgvqy

<nav>
    <ul id="nav">  
      <li><a href="contact.html" class="emph">Contact</a></li>
      <li><a href="https://www.behance.net/chrisbrennandesigns" target="_blank">Behance</a></li>
      <li><a href="https://www.linkedin.com/in/chrisbrennanpgh" target="_blank">LinkedIn</a></li>
    </ul>
 </nav> 


nav{
  position:absolute;
  right: 0px;
  right:350px;
  top: 50px;
}
#nav{
  list-style-type:none;
}
nav li{
  float:left;
  margin:0px 10px;
  padding-right: 11px;
  font-family: 'Lato', sans-serif;
  color:#888;
}
nav a{
  text-decoration: none;
  display: inline-block;
  border-bottom: 3px solid blue;    
  margin-right: 39px; 
  width: 0px;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}
nav a:hover{
 -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
  border-bottom: 3px solid blue;
  width: 55px;
  margin-right: 9px;
}

score 2 · Answer 1 · answered Sep 04 '15 at 13:28

2

Use pseudoclases instead of animating border. Take a look codepen.io/anon/pen/MaYQEp

answered Sep 04 '15 at 13:28

Adam Kosmala

925
6
9

This is great. Thank you! – Chris Brennan Sep 04 '15 at 14:03
Whilst this may theoretically answer the question, [**it would be preferable**](//meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. Link-only answers can become invalid if the linked page changes – Paulie_D Sep 04 '15 at 15:06

score 1 · Answer 2 · answered Sep 04 '15 at 14:02

this is happening because "nav a" margin-right is not good enough and when you are chaning on hover at "nav a:hover" it pushes the content. as per my knowledge you can achieve this by

using following css in "nav a"

 nav a{
   text-decoration: none;
   display: inline-block;
   border-bottom: 3px solid blue;    
    margin-right: 65px; 
   width: 0px;
   -webkit-transition: 0.5s ease;
    transition: 0.5s ease;
  }

and some the css for "nav a :hover "

 nav a:hover{
 -webkit-transition: 0.5s ease;
   transition: 0.5s ease;
   border-bottom: 3px solid blue;
   width: 55px;
    margin-right: 9px;
 }

css underline transitions hover state bouncing my list items

2 Answers2