Remove last bar between links in nav - html

Question

I have a jsfiddle here - https://jsfiddle.net/w4k70at5/
It's a realy simple problem but I'm a bit stumped.
I have a border between each link to separate them.
I don't want a border on the last link in the line.
I can remove the last border but can I remove the border after 'Link Six' and then when the page is resized remove the border on the last link on that line.
*{
margin: 0;
padding: 0;
}
nav{
margin: 50px;
max-width: 600px;
margin: 50px auto 0 auto;
}
ul{
list-style: none;
text-align: center;
}
li{
display: inline;
margin: 0 0 10px 0;
}
a{
display: inline-block;
border-right: 1px solid red;
font-size: 1.5em;
padding: 5px;
text-decoration: none;
}
li:last-of-type a{
border-right: none;
}

Answer 1

You can perform that using Jquery :
1st possibility:
Add a JQuery function which will add a class to your ul if it's the last one on the line:
$(function() {
var lastElement = false;
$("ul > li").each(function() {
if (lastElement && lastElement.offset().top != $(this).offset().top) {
lastElement.addClass("noborder");
}
lastElement = $(this);
}).last().addClass("noborder");
});
And a CSS class to remove the border:
.noborder a {
border: 0;
}
If you want, you can remove your CSS rule with the previous solution:
li:last-of-type a {
border-right: none;
}
JSFiddle 1: https://jsfiddle.net/ghorg12110/w4k70at5/4/
2nd possibility:
Same JQuery function but will not target the last ul > li a (because you already target it with your CSS):
$(function() {
var lastElement = false;
$("ul > li").each(function() {
if (lastElement && lastElement.offset().top != $(this).offset().top) {
lastElement.addClass("noborder");
}
lastElement = $(this);
});
});
And a CSS class to remove the border:
.noborder a {
border: 0;
}
JsFiddle 2: http://jsfiddle.net/ghorg12110/x93456gr/

Answer 2

FULL CSS SOLUTION
https://jsfiddle.net/w4k70at5/
I added a class to the <li> that cause a problem, and this one is set up like following :
When the screen size is under 590, I tell the class to show a right red border
When screen size is above, border is transparent
I used media queries CSS function to perform this. This allows to set different class behiaviour for different variables (like the screen size in this case).