If your slash.png
is merely cosmetic, I would advise you use the CSS ::after
pseudo-element, which matches a virtual last-child of the element in question. Then use the :last-child
selector to avoid it displaying in the last item. It should be something like so:
ul.nav li::after {
background: url("https://wordpress.stackexchange.com/questions/88609/images/slash.png") bottom no-repeat;
content: '';
display: inline-block;
width: 20px; // Set this to the width of your slash image
height: 20px; // Set this to the height of your slash image
}
ul.nav li:last-child::after {
background: none;
}
Note, however, that while :after
is supported by IE8+, :last-child
is supported only by IE9+, so you might want to deal with those compatibility issues.
To do exactly what you asked, you should build a custom walker by extending Walker_Nav_Menu
, or you might try hooking into the wp_nav_menu_objects
hook. In your case, though, I don’t think this is at all necessary.