<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);
});
}
This Pen doesn't use any external CSS resources.