Bootstrap导航栏中按钮间添加竖线分隔

要实现的效果如图所示：
这里没有什么难点，只是感觉这种布局使用挺多的，纪录一下，方便以后使用。
曾经想过的思路：

1. 添加相同的<li><a href="#">|</a></li>标签，
   但是元素间距离会变大，因为｜占据同等宽度
2. 给元素添加右边框，
   审查元素发现，元素高度跟导航栏一样高，所以｜会跟导航栏一样高
3. 最终用伪元素实现了想要的效果

`.navbar-right li:after {
   content: '';
   position: absolute;
   width: 1px;
   height: 14px;
   background-color: #a4a4a4;
   top:18px;
   right: 0;
  ｝