Bootstrap 4 add vertical divider pipe - css

Question

Hi i am trying to add some separator between nav-link but it does not work
i tried to add
nav-link:after {
content:"|";
}
but it is not working or it shows in the left side.
here is my code:
<nav class="navbar navbar-expand-md navbar-dark bg-color">
<div class="navbar-brand header-title">Title</div> <!-- this is in the middle -->
<div class="navbar-collapse collapse" id="collapsingNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="navbar-brand" href="#">
<img src="logo.png" />
</a>
</li>
</ul>
<!-- Here between nav-item I would lik to add pipe speparator -->
<ul class="navbar-nav ml-auto">
<div class="nav-item nav-link mr-md-2">
<div> some test some test</div>
</div>
<div class="nav-item nav-link mr-md-2">
<div> some test</div>
</div>
<li class="nav-item nav-icons">
<a href="">
<span class="icon"> X </span>
</a>
</li>
<li class="nav-item nav-icons">
<a href="">
<span class="icon"> V </span>
</a>
</li>
</ul>
</div>
</nav>

Answer 1

You forgot . before class in css .nav-link and set position: absolute; to position it...
See fiddle:https://jsfiddle.net/3ah58br4/7/
body{background-color:black!important;}
.nav-link:after {
content: "|";
position: absolute;
top: 16px;
margin-left: -10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-sm navbar-dark bg-color">
<div class="navbar-brand header-title">Title</div> <!-- this is in the middle -->
<div class="navbar-collapse collapse" id="collapsingNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="navbar-brand" href="#">
<img src="logo.png" />
</a>
</li>
</ul>
<!-- Here between nav-item I would lik to add pipe speparator -->
<ul class="navbar-nav ml-auto">
<div class="nav-item nav-link mr-md-2">
<div> some test some test</div>
</div>
<div class="nav-item nav-link mr-md-2">
<div> some test</div>
</div>
<li class="nav-item nav-icons">
<a href="">
<span class="icon"> X </span>
</a>
</li>
<li class="nav-item nav-icons">
<a href="">
<span class="icon"> V </span>
</a>
</li>
</ul>
</div>
</nav>