css adding delimeters to nav

Question

I have a navigation menu that is basically a list of links that wraps on to multiple with n number of links on each dependent of length of link etc,

Above is what I am trying to recreate, as you can the last link on each line does not have a delimeter, is it possible to replicate this? Currently I have managed to get a delimeter between each link and at the end of every row.

I have no control over the HTML other wise I would loop through the links and only display x number of links on each line, I could then do nth-child() however I will never know how many links will be shown on each line.

Here is a link to a test, as you can last link on each line has a border-right ideally I would want to turn these off if there is no sibling on the same line.

https://jsbin.com/givaquyozu/edit?html,css,output

Answer 1

Given we don't see all markup, you could use the same trick many framework does when they add a margin between elements, where they have overflow set to hidden on the parent and then move the element with a negative margin.

The great with this, it is transparent to its background, in case of using i.e. an image, and here using the pseudo ::before for the delimiter.

Stack snippet

.parent {
  overflow: hidden;
}
.parent ul {
  width: 381px;
  padding: 0;
  margin-left: -5px;
}
.parent ul li {
  display: inline-block;
}
.parent ul li::before {
  content: '|';
  padding-right: 5px;
}
a {
  display: inline-block;
  padding-right: 8px;
  padding-left: 8px;
}

<div class='parent'>
  <ul>
    <li><a href='#'>Link nr 1</a></li>
    <li><a href='#'>Link nr 2</a></li>
    <li><a href='#'>Link nr 3</a></li>
    <li><a href='#'>Link nr 4</a></li>
    <li><a href='#'>Link nr 5</a></li>
    <li><a href='#'>Link nr 6</a></li>
    <li><a href='#'>Link nr 7</a></li>
  </ul>
</div>

---

Update

Even if you don't know how many links per row, you can still loop through them with a script, where all items but the first on each row get a class

Codepen demo

(function ($) {
  //  preload object array to gain performance
  var $items = $('.parent ul li');

  //  run at resize
  $( window ).resize(function() {
    $.fn.setDelimit(false,0);   
  });

  $.fn.setDelimit = function(nl,idx) {

    $items.each(function(i, obj) {    

      //  did top value changed, then new row
      if ($items.eq(i - 1).offset().top != $(obj).offset().top) {
        nl = true;
      }

      if (!nl) {        
        $(obj).addClass('delimiter');
      } else {
        // reset
        $(obj).removeClass('delimiter');
      }
      nl = false;

    });

  }

  //  run at load
  $.fn.setDelimit(true,0);

}(jQuery));