use CSS:before to separate anchors

Question

Given the following HTML:

<a href="a.html">A</a>
<a href="b.html">B</a>

I want to have the result:

A - B

so I made this CSS:

a:not(:first-child)::before{
 content: ' - ';
}

the jsFiddle can be found here.

But this puts the dash in the second anchor, effectively like so:

<a href="a.html">A</a><a href="b.html"> - B</a>

but I'm looking for:

<a href="a.html">A</a> - <a href="b.html">B</a>

Needless to say is that the links are dynamically generated, so hardcoding it like this is not an option. Can this be done in CSS and if so, how?

Answer 1

If I would want to do it outside of the anchors, I would wrap each anchor inside of a span and apply the before to the span element:

<span><a href='a.html'>A</a></span>
<span><a href='b.html'>B</a></span>

Here's the fiddle with spans working: http://jsfiddle.net/8w2onc74/2/