title: How to separate link items with pipeline
body: <p>This is my first time posting a question here.</p>
  
  <p>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 - <a href="https://stackoverflow.com/questions/9171699/add-a-pipe-separator-after-items-in-an-unordered-list-unless-that-item-is-the-la">Add a pipe separator after items in an unordered list unless that item is the last on a line</a> and I used that, but the items are not separated as they are supposed to.</p>
  
  <p>What I need to get: <a href="http://prntscr.com/4br2lb" rel="nofollow noreferrer">http://prntscr.com/4br2lb</a></p>
  
  <p>After implementing the code from the post I found here I get this: <a href="http://prntscr.com/4br2yj" rel="nofollow noreferrer">http://prntscr.com/4br2yj</a></p>
  
  <p>Here is my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="navbar navbar-default navbar-static-top header-menu"&gt;
          &lt;div class="collapse navbar-collapse navHeaderMenuCollapse"&gt;
              &lt;ul class="nav navbar-nav navbar-middle navbar-text" style="float:none;margin: 0 auto; display: table;table-layout: fixed;"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;AUTO&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;LIFE&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;HEALTH&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;BUSINESS&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;MORE...&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>ul li { 
  float: left; }
  ul li:after {
  content: "|"; padding: 0 .5em; }
  </code></pre>
  
  <p>Thank you in advance!</p>