I like to create horizonatal menu separator with CSS only, without any image. I use this method mainly in the header or footer menus. However this way was limited, because I only knew the border-left or right CSS properties (e.g. border-left:1px solid #ccc or border-right:1px solid #ccc) and these properties places only a ” | ” separator in the menus. Not too creative.

But – tatatata  – I found one new (for me) CSS property “content” and one new (for me) class selector “li:after”, so I can place special characters in my menus as a menu separator now.

Example:

li:after {content:" | "}

My site’s footer menu has been created by the following parameters:

#footermenu li:after {content:" > "}#footermenu li.item81:after {content:" "}

The first “content” property place a “>” character after all menu items in the footer menu, the second “content” property deletes the “>” character from last (item81) menu item.

I tested it in Firefox 3, IE 8, Google Chrome 2.0 and Opera 9.63, it works fine in all mentioned browser.

See my menu in the footer.