在repsonsive Bootstrap导航栏中添加分隔线

Question

我想在响应式Bootstrap导航栏中的菜单项之间添加分隔线。我尝试使用border-bottom，但我需要双方插入。这是我想要实现的（颜色不是这里的重点）：

如您所见，线条不会从屏幕边缘开始。

我怎样才能做到这一点？

这是我目前的代码：

<div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-log-in hidden-on-mobile"></span> Belépés</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-user hidden-on-mobile"></span> Regisztráció</a></li>
      </ul>
    </div>

Answer 1

将边框应用于标记中a的伪元素，并使用position: absolute定位，并使用left和right值来说明其上的填充元素使边框与文本对齐。

.nav>li>a:after {
  content: '';
  border-bottom: 1px solid red;
  position: absolute;
  bottom: 0; left: 15px; right: 15px;
}

/* you don't need this - just for the demo */
.collapse {
  display: block!important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-log-in hidden-on-mobile"></span> Belépés</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-user hidden-on-mobile"></span> Regisztráció</a></li>
      </ul>
    </div>