添加字符：<a> without including in anchor text</a>之前

Question

如何在链接之前添加字符而不将其作为可点击锚文本的一部分包含在内？

HTML喜欢：

<p>blah blah blah <a href="example.com">blah</a></p>

css喜欢：

a:before {content: "foo ";}

给出的结果如下：blah blah blah foo blah

期望的结果：blah blah blah foo blah

Answer 1

您不能使用伪分离它们，因为它们位于同一个DOM树中。

您可以使用范围并在那里使用内容：

<p>blah blah blah <span></span><a href="example.com">blah</a></p>

p span:before {content: "foo ";}

Answer 2

/* CSS */
.link:before {content: "foo ";}

<!-- HTML -->
<p>
  blah blah blah
  <span class="link"><a href="example.com">blah</a></span>
</p>

Answer 3

您可以设置pointer-events: none使其无法点击（点击通过）：

＆＃13;

＆＃13;

a:before {
  content: "nope ";
  pointer-events: none;
  
  /* to make it look "normal" */
  color: black;
}

a {
  text-decoration: none;
}

＆＃13;

<a href="javascript:alert('click');">test</a>

＆＃13;

＆＃13;

＆＃13;