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

【问题标题】：Possible to make a:after/before pseudo elements clickable as part of the link?可以将 a:after/before 伪元素作为链接的一部分点击吗？
【发布时间】：2011-10-27 10:34:32
【问题描述】：

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

例如下面的 css 之后会显示 url：

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

...但它不会是可点击的。

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

编辑：我使用的是 chrome 13.0.782.107。原来是bug。（谢谢肖恩）

【问题讨论】：

您似乎在 Chrome 中发现了一个错误（我已经用解决方法更新了我的答案）。

标签： html css google-chrome pseudo-element

【解决方案1】：

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

a:after {
 pointer-events: none;
}

【讨论】：

【解决方案2】：

我分别包装了链接和文本—— :before 放在容器上，链接放在里面。这样我可以将 :before 用作 jQuery 跳跳机，将文本用作链接。 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});

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

【讨论】：

【解决方案3】：

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

基于spec，生成的内容应被视为正在为其生成的元素的子。我创建了一个JSFiddle 来测试这一点，生成的文本在大多数浏览器中都为我链接（Chrome 13 是唯一的例外。）我猜你正在 Chrome 中进行测试。这是一个可重现的错误。

解决方法是在链接上简单地指定背景颜色......如果您希望能够对所有链接使用它，声明背景图像（但不指定图像，或使用透明的.gif -或者正如刚才所指出的，将opacity 设置为 1) works 以外的任何值。

【讨论】：

在生成的内容中使用<a class="plain"，并添加A.plain:before { content: "" }可以避免无限递归。
@noa -- :after ... 但好主意 :-) 不幸的是，生成的内容不支持 HTML（此处测试：jsfiddle.net/zx6Wv）
非常好。接得好！我想这意味着我应该针对 chrome 13 提交一个错误（除非你愿意）。
@Catskul - 刚刚提交了一个 :-) 谢谢！（如果你想添加链接是code.google.com/p/chromium/issues/detail?id=92917）。
它最终在 Chrome 71 中修复，目前是 beta 版！

【解决方案4】：

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

a { vertical-align: middle; }

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

【讨论】：

【解决方案5】：

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

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

如果 URL 的大小不同，您将不得不使用 javascript 来获取它。

【讨论】：

当您提交此内容时，我只是在输入一个类似的答案。这会起作用吗？填充也会将 after 元素推出，不是吗？
@cat 没有，因为generated content does not alter the document tree.

【解决方案6】：

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

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

【讨论】：

你确定吗？您能否发布一个工作示例？我认为没有办法将事件侦听器附加到伪元素。
生成的内容不会插入到 DOM 中，因此 JavaScript 无法访问其属性/事件/方法...

【解决方案7】：

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

  a {
     margin-right: 40px;
  }

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

【讨论】：

【解决方案8】：

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

【讨论】：

“jQuery or javascript”这是一个新趋势 jQuery≠javascript？