How to change the default separator of my list items?

Question

In my style.css I have:

.navbar-default .navbar-nav > li > a {
    color: #fff;
    border-right: 1px solid rgba(0,0,0,.2);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.10);
}

This causes my menu to display: Home | About | Blog | Shop |

I would like it to display: Home / About / Blog / Shop

Does anyone have any hints for me? I tried:

.navbar-default .navbar-nav > li > a {
   color: #fff;
   content: "/" rgba(0,0,0,.2);
}

But that just made the separators disappear altogether.

Answer 1

You don't need position:absolute at all as it's overkill (albeit not very much overkill). You can use floats instead:

li {
    display: inline-block;
    margin-left:10px; /* Adjust as needed */
}
li:not(:first-of-type):after { /* Exempts the first LI */
    display:block;
    float:left;
    margin-right:10px; /* Adjust as needed */
    content:"/";
}
  

<ul>
    <li>Home</li>
    <li>Show</li>
    <li>About</li>
    <li>Contact</li>
</ul>