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

【问题标题】：Spacing for underline/border - setting a specific width下划线/边框的间距 - 设置特定宽度
【发布时间】：2015-05-12 11:31:31
【问题描述】：

我正在创建一个具有特定活动状态的导航菜单。本质上，它是一个下划线，但具有更大的间距和特定的宽度。所以我已经开始创建这个带有边框底部属性和高度的导航。这解决了导航和线条下方的间距，但是，我如何设置文字下方边框的宽度，使其看起来像这样：

基本上我有这个：

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

除了线的宽度之外，哪个有效？这甚至可能吗？

【问题讨论】：

标签： html css uinavigationbar

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：