Use CSS: Before Separating Anchors

Question

Given the following HTML:

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

I want to get the result:

A - B

so I made this CSS:

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

jsFiddle can be found here .

But this puts a line in the second anchor, in fact, like this:

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

but I am looking for:

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

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

Answer 1

If I wanted to do this outside the anchors, I would wrap each anchor inside the span and apply the span element earlier:

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

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

Answer 2

:before :after , . .

• pointer-events: none,

• cursor: text,

• position: absolute left: 100%, a, position: relative

• ,

a {
  text-decoration: none;
}
a:first-child {
  position: relative;
  margin-right: 10px;
}
a:first-child:after {
  content: '-';
  position: absolute;
  left: 100%;
  margin-left: 5px;
  color: #000;
  cursor: text;
  pointer-events: none;
}

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

Hide result