下劃線/邊框的間距 - 設置特定寬度

Question

我正在創建一個具有特定活動狀態的導航菜單。 本質上，它是一個下劃線，但具有更大的間距和特定的寬度。所以我已經開始創建具有邊框底部屬性和高度的導航。然而，這解決了導航和信號線下方的距離，我怎麼可以設置文字的下方邊框的寬度，所以它看起來像這樣：

基本上我有這樣的：

<nav class="nav" role="navigation"> 
     <ul id="main-menu" class="pos-ul clearfix"> 
      <li class="first item"><a href="/" class="active">Home</a></li> 
      <li class="item"><a href="/administration.html">Administration</a>   
</li> 

.nav > ul > li { 
position: relative; 
float: left; 
margin-left:19px; 
font-size: 20px; 
line-height: 66px; 
color:#fff; 
font-family:FrutigerLTPro-Roman; 
font-weight:normal; 
height:46px; 
border-bottom:2px solid #fff; 
} 

哪個工作，除了線的寬度？這甚至有可能嗎？

Answer 1

你想要這樣嗎？

nav > ul > li { 
 
    position: relative; 
 
    float: left; 
 
    margin-left: 19px; 
 
    font-size: 20px; 
 
    line-height: 66px; 
 
    color: #fff; 
 
    font-family: FrutigerLTPro-Roman; 
 
    font-weight: normal; 
 
    height: 46px; 
 
} 
 
.nav > ul > li a { 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    color: #f00; 
 
} 
 
.nav > ul > li a.active:after { 
 
    content: ""; 
 
    height: 2px; 
 
    width: 50%; 
 
    position: absolute; 
 
    background: red; 
 
    bottom: 0; 
 
    margin: auto; 
 
    left: 25%; 
 
    right: 25%; 
 
}

<nav class="nav" role="navigation"> 
 
    <ul id="main-menu" class="pos-ul clearfix"> 
 
    <li class="first item"><a href="/" class="active">Home</a> 
 
    </li> 
 
    <li class="item"><a href="/administration.html">Administration</a> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 2

可以使用其可以根據需要進行定製的僞元件。

a { 
 
    text-decoration: none; 
 
} 
 
.nav > ul > li { 
 
    position: relative; 
 
    float: left; 
 
    margin-left: 19px; 
 
    font-size: 20px; 
 
    line-height: 66px; 
 
    color: #fff; 
 
    font-family: FrutigerLTPro-Roman; 
 
    font-weight: normal; 
 
    height: 46px; 
 
} 
 
li.active::after, 
 
li:hover::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    width: 5ch; 
 
    height: 4px; 
 
    background: red; 
 
}

<nav class="nav" role="navigation"> 
 
    <ul id="main-menu" class="pos-ul clearfix"> 
 
    <li class="first item"><a href="/" class="active">Home</a> 
 

 
    </li> 
 
    <li class="item active"><a href="/administration.html">Administration</a> 
 
    </li> 
 
    </ul> 
 
</nav>