Question

给出以下HTML：

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

我想得到结果：

A - B

所以我做了这个CSS：

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

jsFiddle can be found here。

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

<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元素：

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

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

Answer 2

从技术上讲，// fragment shader uniform sampler2D texture; varying vec2 vTexCoord; void main() { vec4 colorMultiplier = vec4(0.5, 1.0, 1.0, 0.2); gl_FragColor = texture2D(texture, vTexCoord) * colorMultiplier; }或:before将始终放置在其中的元素。但是我们可以伪造它。

:after因此无法点击
pointer-events: none因此它看起来不可点击
cursor: text并position: absolute将其弹出left: 100%

a

与普通文字颜色匹配的颜色

实施例

＆＃13;

position: relative

＆＃13;

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;
}

＆＃13;

使用CSS：之前分开锚点

2 个答案:

实施例