How to create a menu separated by a bar but first and last item has no bar?

How do you achieve this kind of menu:

About | Privacy | Contact | Site Map

... a menu sepa开发者_运维问答rated by a vertical bar, but the first and last item doesn't have a bar on the left and right sides (as shown in the example)?

The menu items are generated dynamically (used in wordpress), not manually.

thanks.

If you are using list items as the mark-up for your navigation you can display a line between each link by creating the separator as a background image on the li.

The trick to get it to only appear in between list items is to position the image to the left of the li, but not on the first one. This example uses the adjacent selector:

#nav li + li {
    background:url('seperator.gif') no-repeat top left;
    padding-left: 10px
}

This CSS adds the image to every list item that follows another list item - in other words all of them but the first.

Alternatively you can use the CSS content property with the before pseudo class, instead of an image. The following code adds a pipe before your navigation links (again using the adjacent selector).

#nav li + li a:before {
    content: "|";
}

Be aware the content property is not supported in IE6 and IE7, and the adjacent selector is not supported in IE6.

See here for CSS contents and browser compatibility - http://www.quirksmode.org/css/contents.html

The vertical bar is just a character on the keyboard, so you can type it in between the words.

Found an easier solution for wordpress!

Just go to Appearance>Menus and add " |" in the end of the Navigation Label for each title of the menu!!

I think the best way to do this is with a CSS class.

In Appearance → Menus: http://d.pr/i/I9ko+

1. Click Screen Options
2. Check CSS Classes

3. Add a class of “last” to your last menu item Then in your style.css, add:

   #nav li.last span { display: none; }