Add a Pipe Separator After Items in an Unordered List Unless That Item Is the Last on a Line

.flex-list {
    position: relative;
    margin: 1em;
    overflow: hidden;
}
.flex-list ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: -1px;
}
.flex-list li {
    flex-grow: 1;
    flex-basis: auto;
    margin: .25em 0;
    padding: 0 1em;
    text-align: center;
    border-left: 1px solid #ccc;
    background-color: #fff;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
<div class="flex-list">
    <ul>
        <li>Dogs</li>
        <li>Cats</li>
        <li>Lions</li>
        <li>Tigers</li>
        <li>Zebras</li>
        <li>Giraffes</li>
        <li>Bears</li>
        <li>Hippopotamuses</li>
        <li>Antelopes</li>
        <li>Unicorns</li>
        <li>Seagulls</li>
    </ul>
</div>

What is the proper way to put divider lines between navigation links?

Pipe characters work, but you could do the same thing with some CSS.

If your markup is like this:

<nav>
  <a href="/about.html">About</a>
  <a href="/portfolio.html">Portfolio</a>
  <a href="/contact.html">Contact</a>
</nav>

You can add some CSS to style the "right side" of each link element to have a border, except for the last element because you don't want a floating divider line on the end of the links.

nav > a {
  border-right: solid 1px #eff0f1;
}
nav > a:last-of-type {
  border-right: none;
}

This will add a border to the right side of all your nav links, but then overrides the final nav link to not have a right border.

Separators for Navigation

Simply use the separator image as a background image on the li.

To get it to only appear in between list items, position the image to the left of the li, but not on the first one.

For example:

#nav li + li {
    background:url('seperator.gif') no-repeat top left;
    padding-left: 10px
}

This CSS adds the image to every list item that follows another list item - in other words all of them but the first.

NB. Be aware the adjacent selector (li + li) doesn't work in IE6, so you will have to just add the background image to the conventional li (with a conditional stylesheet) and perhaps apply a negative margin to one of the edges.

Responsive Separator for Horizontal List

You can exploit fact that trailing and line trailing white space automatically collapses:

document.write(
 'word<b style="background: red; outline: 1px solid blue;"> </b>'
 .repeat(42)
);

#menu-footer-menu li:last-child .f_sep{ display:none }

<span class="bar">|</span>

.bar { font-size: 20px; }