Making a mini vertical divider - html

Question

I am trying to make a miniature vertical bar like in this site, where they have the navigation and the vertical bars in between each link. I have tried the solution to a previous question, but when I tried to use 'margin-left' to move the text, the bar wouldn't stay between each link, it'd to this.
HTML
<div id="nav-clearfix">
<div id="nav">
<ul class="nav-pages">
<li>HOME</li>
<li><div class="mini-divider"></div></li>
<li>ROSTER</li>
<li><div class="mini-divider"></div></li>
<li>GALLERY</li>
<li><div class="mini-divider"></div></li>
<li>ABOUT US</li>
<li><div class="mini-divider"></div></li>
<li>SPONSORS</li>
</ul>
</div>
</div>
CSS
#nav-clearfix {
width: 100%;
height: 100px;
background: #000;
}
#nav {
margin-left: 10%;
width: 100%;
}
.nav-pages {
padding-top: 10px;
}
.mini-divider {
position: absolute;
top: 26%;
bottom: 71%;
border-left: 1px solid white;
}
.nav-pages li, .mini-divider {
float: left;
margin-left: 50px;
}

Answer 1

CSS
.nav-pages li:not(:last-child) a:after{
content: "";
/* width: 0px; */
background: white;
margin-left: 20px;
position: absolute;
height: inherit;
color: white;
border: 1px solid white;
height: 15px;
}
Remove The Border Related HTML & CSS
<li><div class="mini-divider"></div></li>
DEMO

Answer 2

You can also use + css selector to give border to the next element no need to add extra element for border
added
*{
margin: 0;
padding: 0;
}
for removing default styles given by browsers
* {
margin: 0;
padding: 0;
}
#nav-clearfix {
width: 100%;
height: 100px;
background: #000;
}
#nav {
width: 100%;
}
.nav-pages {
padding-top: 10px;
text-align:center;
}
.nav-pages li {
display: inline-block;
padding: 0 10px;
}
.nav-pages li + li {
border-left: 1px solid white;
}
<div id="nav-clearfix">
<div id="nav">
<ul class="nav-pages">
<li>HOME</li>
<li>ROSTER</li>
<li>GALLERY</li>
<li>ABOUT US</li>
<li>SPONSORS</li>
</ul>
</div>
</div>

Answer 3

Use this .separator class for vertical separator.
CSS
ul > li{
float: left;
display: block;
position: relative;
}
ul > li > a{
padding: 4px 6px;
display: block;
}
.separator {
background: none repeat scroll 0 0 #222;
border-left: 1px solid #333;
float: left;
height: 30px;
width: 1px;
}
HTML
<ul>
<li >
<a href="#" >Home</a>
</li> <span class="separator"></span>
<li> Link 1 </li> <span class="separator"></span>
<li > Link 2 </li> <span class="separator"></span>
<li> Link3 </li> <span class="separator"></span>
<li > Contact </li>
</ul>
jsfiddle: demo