How do I put these lines between text?

I am wanting to and have not figured out yet how to place these between the links on a navigation bar or at least between pieces of text.

The circled section

http://s10.postimg.org/724qvm42h/needhelp.png

Solution

Your question is somewhat not clear. Though, if you are using html and css for your task then you can do this like: (Assuming if you want to put lines in menu bar)

HTML code:
<input type="button" value="button1" id="mybutton">
<input type="button" value="button2" id="mybutton">
<input type="button" value="button2" id="mynewbutton">

CSS code:
#mybutton
{
    border:none;
    border-right: 2px solid #87240f;
    background-color:transparent;
}
#mynewbutton
{
    border:none;
    background-color:transparent;

}

This is what I got:

enter image description here

If you want to put vertical line between texts then :

HTML Code:
<p class="aboutus">
<b>About Us</b><br>
<br>   
NECI Overview<br>
Our History<br>
Accreditation<br>
Why choose us?<br>
Campus Tour<br>
Affliations<br>
Awards<br>
Community <br>
News<br>
</p>

CSS:
.aboutus{

font-family: 'Lato', sans-serif;
font-size: 14px;
float: left;
border-right: 1px solid;
width: 140px;
}

Output:

enter image description here