html - 居中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;
}

工作小提琴

Answer 2

添加一个跨度，将其居中并在a. 悬停时显示。

jsfiddle

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

Answer 3

你可以尝试这样的事情：

<li><a href="#">Home</a><span class="hovered"></span></li>


.hovered {
   margin: 0;
   height: 3px;
   width: 20px;
   background-color:transparent;
   display: inline-block;
}

#nav a:hover + .hovered {

    background-color: black;
}

http://jsfiddle.net/pCQLN/9/