css下划线转换悬停状态反弹我的列表项

我想要达到的-->

我将这些样式应用于我的css。问题是我的链接在悬停时会反弹到左侧。我根本不想让他们动。我想要的唯一转换是下划线在悬停状态下从左向右移动。我有一个代码笔链接下面显示我的问题。再次强调：我不希望我的链接Contact、Behance、LinkedIn移动，只希望下划线在悬停时从左到右显示，就像我在上面发布的JSFIDLE链接中显示的那样

谢谢

我的密码笔

---

使用伪类别而不是设置边框动画。看看codepen.io/anon/pen/MaYQEp

之所以会出现这种情况，是因为导航a右边距不够好，当您在导航a:hover上切换时，它会推动内容。据我所知，你可以通过

在NAVA中使用以下css

 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;
  }

还有一些是导航a:hover的css

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

---

这太棒了。非常感谢。虽然这在理论上可以回答这个问题，但在这里包括答案的基本部分，并提供链接供参考。如果链接页面发生更改，则仅链接的答案可能无效

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