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