可以使 a:after/before 伪元素作为链接的一部分可点击吗？

Question

伪元素 a:after a:before 允许您添加看起来是链接一部分的文本。但是，我似乎无法找到一种方法来使该部分作为链接的一部分可点击。

例如，下面的 css 随后显示​​ url：

  a:after {
     content: " (" attr(href) ")";
  }

...但它不可点击。

有人能在不改变底层 HTML 的情况下解决这个问题吗？

编辑：我使用的是 chrome 13.0.782.107。事实证明，这是一个错误。 （谢谢肖恩）

Answer 1

您似乎在所使用的浏览器中发现了一个错误。

根据规范，生成的内容应被视为为其生成元素的子元素。我创建了一个 JSFiddle 来测试这一点，并且在大多数浏览器（Chrome 13 是唯一的例外。）我的猜测是您正在 Chrome 中进行测试。这是一个可重现的错误。

解决方法是简单地在链接上指定背景颜色...如果您希望能够将其用于所有链接，则声明背景图像（但不指定图像，或使用透明的 .gif - 或者正如刚才指出的，将 opacity 设置为 1) works< /a>.

Answer 2

如果您在 Wrapper 上有一个链接，那么您可以通过将 pointer-events 设置为 none 来使伪元素可点击。

a:after {
 pointer-events: none;
}

Answer 3

我遇到了同样的问题，显然如果我设置

a { vertical-align: middle; }

（因此在链接本身上，而不是伪元素），它就可以工作。

Answer 4

我希望有人有比这更好的解决方案，但以防万一，我确实想出了这个可怕/蹩脚/黑客的解决方案：

  a {
     margin-right: 40px;
  }

  a:after {
     content: " (" attr(href) ")";
     margin-left: -40px;
  }

Answer 5

只需将其添加到您的 css 中：

a {padding-right:Ypx} /* Y = size of your url in pixels */

如果 URL 的大小有所不同，您将必须使用 javascript 来获取它。

Answer 6

为了避免修改文档树，您可以使用 a:after 的 JavaScript 点击处理程序。

编辑： 这不起作用，因为伪元素不会添加到 DOM 中。

Answer 7

:before 和 :after 在选择器之前和之后添加内容。在 CSS 中，没有选择器可以让您获取和编辑标签内的内容。实现这一目标的唯一方法是使用 jQuery 或 javascript 来实际编辑 HTML。

Answer 8

我将链接和文本分开包装——:before 放在容器上，链接放在里面。这样我就可以使用 :before 作为 jQuery tigger 并使用文本作为链接。
HTML：

<li class="before-here"><a href="#">My Link Text</a></li> 

CSS：

li.before-here:before{ //some css like an image }

Jquery：

$("li.before-here").click(function(){ //do something});

我使用它在树中创建隐藏/显示切换 - 这为我提供了左侧所需的按钮，并允许我链接到父级。