Separator between menu items

Generate list for menus and then add a right-hand border to the li elements via CSS.

Thanks, I had already tried, what I’m not able to solve is the fact that last element doesn’t have it.
Is it ok if I put an additional class for the last element that sets that border to none? will it give me problem when I’ll convert the layout to wordpress theme?
Thanks

OK – so approach it the other way around. Add a left hand border to each li and then remove the border on the first li using the :first-child pseudo class.

Thanks so much!
I was nearly getting mad about it! ??
You saved me!
K

Glad to have helped. ??

thank you
but u can apply custom class.

It’s very easy. I’ve described it in my blog https://lab.ixblogs.com/razdeliteli-v-menyu-wordpress/ – but it’s on Russian language.
So:
1. Open ?Menu? section.
2. Open “Display Options” (at the top) and check “CSS classes”.
3. Open last menu item and enter class name “nospan” (or whatever you want).
4. Add to your style.css:

.nospan span{
display: none;
}

5. In the template file (header.php or footer.php, etc.) use this code to display menu:
<?php wp_nav_menu('menu=Top Menu&after=<span>|</span>'); ?>
“Top Menu” – is the name of your menu.
That’s all.

just found a very easy way of doing it.
If you having a list, say generated by wp_nav_menu, you can easily add one line of code to do it:

<script>
            jQuery(document).ready(function(){
                jQuery('ul#menu-footer li:not(:last)').after('<li class="footer-divider">|</li>');
            });
          </script>

If it doesn’t work, try changing “jQuery” to the $ sign. and make sure the “menu-footer” is replaced with your list ID.
You can also style the seperator with css class (like color, padding and so on…)

Ok. new update on this, another easy way doing it, for browsers which does not support JS:
as djanym said, add:
&after=<li class="menu-divider">|</li>
to your menu arguments.

and in your CSS, add:
li.menu-divider:last-child {display:none;}

Have fun.