html - 悬停时边框底部需要向上移动

Question

我想要一个在悬停时向上移动的边框(看起来像下划线)。

如果这是一个链接:

链接

然后如果我将鼠标悬停在上面

链接
""""

网站示例: http://matthias-schoenaerts.com/(导航栏)

我希望它尽可能简单。

这是我想出的: http://jsfiddle.net/Lxxqz3pL/

HTML:

<ul id="nav">
  <li><a href="#">About Us</a></li>
  <li><a href="#">Our Products</a></li>
  <li><a href="#">FAQs</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Login</a></li>
</ul>

CSS:

/* Begin Navigation Bar Styling */
#nav {
width: 100%;
float: center;
margin: 0 0 3em 0;
left: 0;
padding: 0;
list-style: none;
background-color: #333333;
border-bottom: 1px solid #ccc; 
border-top: 1px solid #ccc; 
position: absolute;
}

#nav li {
float: left; 
}

#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #a3a3a3;
}

#nav li a:hover {
transition: border .5s ease-in;
background-color: #fff; 
border-bottom: 3px solid red;
}
/* End navigation bar styling. */

Answer 1

这里是 updated CSS , 它是你想要得到的吗？

/* Begin Navigation Bar Styling */
#nav {
    width: 100%;
    float: center;
    margin: 0 0 3em 0;
    left: 0;
    padding: 0;
    list-style: none;
    background-color: #333333;
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; 
    position: absolute;
    overflow: hidden;
    }
#nav li {
    float: left; 
    }
#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #a3a3a3;
    }
#nav li a:after{
    display:block;
    width:100%;
    height:0px;
    content:" ";
    border:1px solid red;
    position: relative;
    top:10px;
}
#nav li a:hover:after{
    transition: 0.5s ease-in;
    transform: translate(0px, -10px);    
    }

/* End navigation bar styling. */