下划线/边框的间距 - 设置特定宽度

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>