<ul class="fix-last-child-list">
  <li><a href="https://wildnet.org/wildlife-programs/african-wild-dog">African Wild Dog</a></li>
  <li><a href="https://wildnet.org/wildlife-programs/andean-cat">Andean Cat</a></li>
  <li><a href="https://wildnet.org/wildlife-programs/cheetah-botswana">Cheetah - Botswana</a></li>
  <li class=""><a href="https://wildnet.org/wildlife-programs/cheetah-namibia">Cheetah - Namibia</a></li>
  <li class=""><a href="https://wildnet.org/wildlife-programs/cotton-top-tamarin">Cotton-Top Tamarin</a></li>
  <li class=""><a href="https://wildnet.org/wildlife-programs/elephant">Elephant</a></li>
  <li class=""><a href="https://wildnet.org/wildlife-programs/elephant-crisis-fund">Elephant Crisis Fund</a></li>
  <li class=""><a href="https://wildnet.org/wildlife-programs/ethiopian-wolf">Ethiopian Wolf</a></li>
  <li class=""><a href="https://wildnet.org/wildlife-programs/grevys-zebra">Grevy's Zebra</a></li>
  <li class=""><a href="https://wildnet.org/wildlife-programs/lion-ewaso">Lion - Ewaso</a></li>
  <li class=""><a href="https://wildnet.org/wildlife-programs/lion-niassa-0">Lion - Niassa</a></li>
  <li class=""><a href="https://wildnet.org/wildlife-programs/lion-recovery-fund">Lion Recovery Fund</a></li>
  <li class=""><a href="https://wildnet.org/wildlife-programs/okapi">Okapi</a></li>
  <li class=""><a href="https://wildnet.org/wildlife-programs/penguin">Penguin</a></li>
  <li class=""><a href="https://wildnet.org/wildlife-programs/saiga-antelope">Saiga Antelope</a></li>
  <li class=""><a href="https://wildnet.org/wildlife-programs/sharks-rays">Sharks and Rays</a></li>
  <li class=""><a href="https://wildnet.org/wildlife-programs/small-wild-cats">Small Wild Cats</a></li>
  <li class=""><a href="https://wildnet.org/wildlife-programs/snow-leopard">Snow Leopard</a></li>
  <li class=""><a href="https://wildnet.org/wildlife-programs/spectacled-bear">Spectacled Bear</a></li>
  <li class=""><a href="https://wildnet.org/what-we-do/scholarships">Scholarship Program</a></li>
</ul>
// use class last-el or first-el
.fix-last-child-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  list-style: none;

  li {
    &:nth-of-type(n+2) {
      &:before {
    content: "|";
    padding: 0 5px;
    }
    }
    &.first-el {
      &:before {
      visibility: hidden;
      }
    }
  }
}
View Compiled
// function on
jQuery(document).ready(function() {
  midDotIt();
  windowResize(midDotIt)
});
//function to trigger another function when resizing the browser window
//use windowResize(functName);
function windowResize(functName) {
  //--------function
  $(window).on('resize orientationchange' , functName);
}
// function init
function midDotIt() {
  var lastElement = false;
  $(".fix-last-child-list li").each(function() {
    if (lastElement && lastElement.offset().left > $(this).offset().left) {
      $(lastElement).addClass("last-el");
      $(this).addClass("first-el");
    } else if (lastElement) {
      $(lastElement).removeClass("last-el");
      $(this).removeClass("first-el");
    }
    lastElement = $(this);
  });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js