Hello, I'm having trouble adding a separator between nav-links that actually works. I tried adding the following code snippet:
nav-link:after {
content:"|";
}
But unfortunately, it's either not working at all or appearing on the left side of the nav-link.
Below is the code snippet I'm working with:
<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 like to add a pipe separator -->
<ul class="navbar-nav ml-auto">
<li class="nav-item nav-link mr-md-2">
<div> some test some test</div>
</li>
<li class="nav-item nav-link mr-md-2">
<div> some test</div>
</li>
<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>