Bootstrap nav separator

by kneidels

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="options-nav">
  <div class="container">
    <ul class="nav navbar-nav pull-left">
      <li><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> email</li>
      <li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> phone</li>
    </ul>
    <ul class="nav navbar-nav pull-right">
      <li>
        <div class="dropdown">
          <a data-target="#" data-toggle="dropdown">User <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="account?open">Rediger konto</a></li>
            <li><a href="orders?open">Vis ordre</a></li>
          </ul>
        </div>
      </li>
      <li>
        <div class="dropdown">
          <a data-target="#" data-toggle="dropdown">Dansk <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="ChangeLanguage?open&lang=da">Dansk</a></li>
            <li><a href="ChangeLanguage?open&lang=en">English</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</div>

CSS

#options-nav .nav>li a:after {
	content: "|";
	color: #ccc;
	display: inline-block;
	font-size: 100%;
	padding: 0 .5em;
}


#options-nav .nav>li {
	display: inline-block;
}

.navbar-na li:after{}