メインメニューに垂直ディバイダを追加

Question

メインメニューのli要素の後ろに垂直ディバイダを追加するにはどうすればよいですか？

<ul class="nav navbar-nav"> 
 
    <li><a href="#"><i class="fa fa-home"></i> <span class="sr-only">(current)</span></a></li> 
 
    <li><a href="#" > نبذه عنا </a></li> 
 
    <li><a href="#"> اكادمية بوذيب للفروسيه </a></li> 
 
    <li><a href="#"> اسطابلات بوذيب </a></li> 
 
    <li><a href="#"> المركز الاعلامي </a></li> 
 
    <li><a href="#"> اتصل بنا </a></li> 
 
    <li><a href="#"> اكثر <i class="fa fa-bars"></i> </a></li> 
 
    <li><a href="#"> </a></li> 
 
</ul>

これは私が修正したいサイトです：the site

そして、これは私がメインメニューは次のようになりたい画像です：the image

は、いずれかを助けることができます私？

Answer 1

あなたが両側に境界線を与えることによって、これを試すことができますが、NAVの項目は、あなたが与えたい縦線よりも高さを持っていますが、あなたはこの

.navbar-default .navbar-nav>li>a:after { 
    content: ''; 
    display: inline-block; 
    position: absolute; 
    width: 1px; 
    background: #fff; 
    height: 30px; 
    right: 0; 
    top: calc(50% - 15px); 
} 
.navbar-default .navbar-nav>li:last-child>a:after, 
.navbar-default .navbar-nav>li:first-child>a:after{ 
    display:none; 
} 

Answer 2

はこの1つ

を試してみてくださいachiveする <pseudo:before>を試すことができます

ul li{ 
 
    float:left; 
 
    list-style:none; 
 
    padding:0 8px; 
 
    border-right:2px solid gray; 
 
} 
 
ul li:last-child{ 
 
    border:none; 
 
    } 
 

 
a{ 
 
    text-decoration:none; 
 
}

<ul class="nav navbar-nav"> 
 
     <li><a href="#"><i class="fa fa-home"></i> <span class="sr-only">(current)</span></a></li> 
 
     <li><a href="#" > نبذه عنا </a></li> 
 
     <li><a href="#"> اكادمية بوذيب للفروسيه </a></li> 
 
     <li><a href="#"> اسطابلات بوذيب </a></li> 
 
     <li><a href="#"> المركز الاعلامي </a></li> 
 
     <li><a href="#"> اتصل بنا </a></li> 
 
     <li><a href="#"> اكثر <i class="fa fa-bars"></i> </a></li> 
 
     </ul>