中心a:悬停边框并指定边框宽度

Question

希望有人能告诉我这是否可能,因为我已经搜索过,无法想出我想要的效果.

我基本上希望将边框悬停在中心位置,这样当鼠标悬停在链接上时,边框底部就会居中.我希望边框宽度是一个大约20px的固定大小并居中.

你可以看到它到目前为止非常基本,jsfiddle就在这里:http://jsfiddle.net/pCQLN/3/

我想要如下图所示的内容:

---

---

感谢您随时随地!

这是我的代码;

HTML

<div id="wrap">
<div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</div>
</div>

CSS

#wrap {
    width:40em;
    height:3em;
    margin:0 auto;
}
#nav {
    float:right;
    width:75%;
}
#nav ul {
    display:inline;
    list-style: none;
    float: right;
}
#nav li {
    float: left;
    width:50px padding-right:1em;
}
#nav a {
    text-align:center;
    text-decoration:none;
    color: #888;
    font-size:1em;
    float: left;
}
#nav a:hover {
    color:#212121;
    display:block;
    width:20px;
    margin:0 auto;
    border-bottom:3px solid #000;
}

Answer 1

将:after伪选择器与hover伪选择器结合使用.

#nav a:hover:after{
    content: "";
    color:#212121;
    display:block;
    width:20px;
    margin:0 auto;
    border-bottom:3px solid #000;
}

工作小提琴