レスポンスブートストラップナビバーにセパレータラインを追加

Question

レスポンスブートストラップナビバーのメニュー項目の間に区切り線を追加したいと思います。私は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

がposition: absoluteと位置付けタグでaの擬似要素に境界線を適用し、その要素のパディングを考慮して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>