中心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/