Интервал для подчеркивания/границы - установка определенной ширины

Question

Я создаю меню навигации, в котором есть определенное активное состояние. По существу, это подчеркивание, но с большим интервалом и определенной шириной. Поэтому я начал создавать эту навигацию с атрибутом border-bottom и высотой. Это решает расстояние под навигации и линией, однако, как я могу установить ширину границы под письменной форме, так что выглядит как так:

По существу у меня есть это:

<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>