Inline menu help needed

Greetings. I’ve created an inline CSS nav menu that separates each menu item with a pipe (e.g "|"). The design uses the pipes between items, but not before the first menu item nor after the last. Hence, it’s appearance is as follows:

FirstMenuItem | Item#2 | Item#3 | LastMenuItem

To accommodate this, I enclosed each pipe in its own list element within the container unordered list. Was I to include the pipes within the list elements containing the menu items, it would (1) add a pipe before the first menu item and (2) I’d need to add a final list element to contain the trailing pipe.

My question, then, is how to create the menu as pictured above using Wayfinder. The original HTML contains alternating list elements for the pipes -- no idea how to go about replicating this within the outerTpl or rowTpl. Anybody?

Thanks!

It’s better to enclose the pipe character in <span> | </span> tags, then for the .last item you can give its span element display:none.

Thanks -- has just discovered that that class is produced and then saw your solution, which is spot on. Thank you.