How to separate link items with pipeline

Question

This is my first time posting a question here.

I am working with twitter bootstrap on a website design. I have to create the navigation menu such that the items listed there will be separated with pipeline. I have found another similar question here - Add a pipe separator after items in an unordered list unless that item is the last on a line and I used that, but the items are not separated as they are supposed to.

What I need to get: http://prntscr.com/4br2lb

After implementing the code from the post I found here I get this: http://prntscr.com/4br2yj

Here is my code:

HTML:

<div class="navbar navbar-default navbar-static-top header-menu">
        <div class="collapse navbar-collapse navHeaderMenuCollapse">
            <ul class="nav navbar-nav navbar-middle navbar-text" style="float:none;margin: 0 auto; display: table;table-layout: fixed;">
                <li><a href="#">HOME</a></li>
                <li><a href="#">AUTO</a></li>
                <li><a href="#">LIFE</a></li>
                <li><a href="#">HEALTH</a></li>
                <li><a href="#">BUSINESS</a></li>
                <li><a href="#">MORE...</a></li>
            </ul>
        </div>
    </div>

CSS:

ul li { 
float: left; }
ul li:after {
content: "|"; padding: 0 .5em; }

Thank you in advance!

Answer 1

Why not use a border for each li except the last instead? E.g:

Demo Fiddle

ul li:not(:last-child) {
    border-right:1px solid grey;
    margin-right:20px;
    padding-right:20px;
}

Otherwise, you will likely need to add positioning to your :after psuedo elements or change the display to inline-block - though its hard to say without being able to replicate your issue with the provided code.

Answer 2

switching the a tags to inline blocks fixed it

div.navbar a {
    display: inline-block;
}
ul li:after {
    content: "|";
}
ul li:last-child:after {
    content: "";
}

jsfiddle demo