CSS :after pseudo-class and content: declaration

Question

I'm trying to add pipes between a set of links using css :after to add content

see this fiddle: http://jsfiddle.net/gbPFR/1/

For some reason, it's adding the pipes inside the <a> tags instead of after them.

Basically all i'm looking for is to get a list like this:

Link1 | Link 2 | Link 3

Any suggestions about what i'm doing wrong here?

Answer 1

The :after pseudo-element actually works this way. The naming is a bit confusing, as the pseudo-element is not inserted as the following sibling but as the last child element.

You could try to use list-style-item, but I guess that is not what you want.

Answer 2

You need to wrap the anchors, as the :after is adding them after. You can use a list to create a child container:

<ul>
 <li><a href="#">Test1</a></li>
</ul>

See http://jsfiddle.net/atqNy/1/