html - Spacing for underline/border - setting a specific width -

i creating navigation menu in has specific active state. essentially, underline, greater spacing , specific width. have begun creating navigation border-bottom attribute , height. solves spacing underneath navigation , line, however, how can set width of border underneath writing appears so:

essentially have this:

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

which works, except width of line? possible?

do want this?

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