使用CSS:之前分开锚点

Question

给出以下HTML:

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

我希望得到结果:

A - B.

所以我制作了这个CSS:

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

jsFiddle 可以在这里找到.

但是这会把破折号放在第二个锚中,实际上是这样的:

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

但我正在寻找:

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

毋庸置疑,链接是动态生成的,因此像这样硬编码不是一种选择.这可以在CSS中完成,如果是这样,怎么做？

Answer 1

如果我想在锚之外进行,我会将每个锚包装在span中,并将before应用于span元素:

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

这是跨度工作的小提琴:http://jsfiddle.net/8w2onc74/2/