Add | to li tags in the menu

Question

Is it possible to add | as a separator for each list item in a menu in CSS?

I tried content: "|" but that didn't work.

The menu is as follows:

 <ul> <li><a href="...">link</a></li> <li><a href="...">link</a></li> <li><a href="...">link</a></li> <li><a href="...">link</a></li> <li><a href="...">link</a></li> </ul> 

and the result:

link link link link

I want too:

link | link | link | link

I know how to do this in JavaScript, but CSS will be nicer :) The menu is generated automatically, and I do not want to deal with it.

Answer 1

I would do this using borders:

 ul li a { border-left:1px solid #000; display:block; } 

If you do not want the line to be first, add the following:

 ul li a:first-child { border:none; } 

Answer 2

You need to use a pseudo-element for content , for example ::before or ::after :

 li + li::before { content: "| "; } 

Here is a demo .

As mentioned above, if you are looking for a string, use border-(left|right) with padding or margin as needed.

Answer 3

It would be helpful if you published a fiddle of what you have tried so far, but this should work:

 li:not(:last-child):after { content:"|"; } 

Working sample in JSfiddle .

Answer 4

Use border:

 li{border-left : 1px solid black;} li:first-child{border : none;} 

Answer 5

Check out this script .

 li { float:left; list-style:none; } li:after { content:"|"; margin:0px 3px; } 

EDIT

I didn’t notice that after I published that I had an extra pipe at the end, and someone else also wrote the correct path in front of me so as not to get rid of what I wrote, it is updated here .

 li { float:left; list-style:none; } li+li:before { content:"|"; margin:0px 3px; } 

Answer 6

Something like that

http://jsfiddle.net/SzvQq/

 ul li a { display: block; padding: 0 15px; border-left: 1px solid #000; } ul li:first-child a { border-left: none; }