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

Question

我正在创建一个导航菜单，其中包含特定的活动状态。 基本上，它是一个下划线，但具有更大的间距和特定的宽度。所以我已经开始使用border-bottom属性和height创建此导航。这解决了导航和线条下方的间距，但是，如何设置书写下方边框的宽度，使其显示如下：

基本上我有这个：

<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

您可以使用可根据需要自定义的伪元素。

＆＃13;

＆＃13;

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

＆＃13;

sed -n '1h;1!H;$!b
         x;s/\n\([^0-9]\)/ \1/gp' YourFile

＆＃13;

＆＃13;

＆＃13;