html - Adding a symbol after each element in CSS -

i need make navigation bar, symbol " | " between each link. tried using

.navbar li::after { position:absolute; content:" | "; }

but end getting first symbol under link, dont know why.

http://prntscr.com/c34zrf

i tried using border-right , border-left, looks ugly , gives me 2 lines every element.

http://prntscr.com/c350gw

here's how building on border-right solution: fiddle

html:

i include span apply border means border keep height of text. if want add padding list, apply horizontal padding li , vertical padding span.

<ul>   <li><span>link 1</span></li>   <li><span>link 2</span></li>   <li><span>link 3</span></li> </ul> 

you can use :first-child remove border should work way ie8

css:

ul{    padding:0px;   margin:0px;  }  li {    list-style:none;   display:inline-block;   padding:10px 0px;  }  span {    padding:0px 10px;   border-left:1px solid red;   display:inline-block;  }  li:first-child span {    border-left:none;    }