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

Working Fiddle

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/