Html 是否可以将：after/before伪元素作为链接的一部分单击？

伪元素a:after a:before允许添加显示为链接一部分的文本。然而，我似乎想不出一种方法，使该部分作为链接的一部分可以点击

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

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

…但它将不可单击

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

---

编辑：我使用的是Chrome13.0.782.107。事实证明这是一个错误。（谢谢Sean）

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

看起来您在使用的浏览器中发现了一个bug

基于，生成的内容应被视为其生成所针对的元素的子元素。我创建了一个测试程序来测试这一点，并且生成的文本在大多数浏览器中都是为我链接的（Chrome13是唯一的例外）。这是一个可复制的错误

解决方法是简单地在链接上指定背景色。。。如果您希望能够对所有链接使用此选项，声明背景图像（但不指定图像，或使用透明的

.gif

-或正如刚刚指出的，将

不透明度设置为除1以外的任何值）。
为了避免修改文档树，您可以对
a:after
使用JavaScript单击处理程序

编辑：这不起作用，因为没有将伪元素添加到DOM中。
只需将其添加到css中即可：

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

如果URL的大小不同，您将不得不使用javascript来获得它。
我希望有人有比这更好的解决方案，但万一没有，我确实想出了这个可怕的/蹩脚的/骇人的解决方案：

  a {
     margin-right: 40px;
  }

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

我也有同样的问题，显然如果我

a { vertical-align: middle; }

（因此在链接本身上，而不是伪元素上），它可以工作。
我分别包装了链接和文本--：before放在容器上，链接放在里面。通过这种方式，我可以使用：before作为jquerytigger，使用文本作为链接。
HTML:

Jquery：

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

我用它在树中创建了一个隐藏/显示切换——这给了我左边需要的按钮，并允许我链接到父级


如果您在包装器上有一个链接，那么您可以通过将
指针事件设置为“无”，使伪元素可单击

a:after {
 pointer-events: none;
}

不完全正确。。。有关CSS如何能够与定义为选择器主题的HTML标记的属性交互的规范，请参见≠ javascript？使用
@noa--
：在
之后。。。但是好主意：-）不幸的是，HTML在生成的内容中不受支持（这里的测试：）非常好。抢手货我想这意味着我应该针对Chrome13提交一个bug（除非你愿意）。@Catskul-刚刚提交了一个：-）谢谢！（链接是如果你想添加的话）。它最终在Chrome71中修复，现在是测试版！你确定吗？你能发布一个有效的例子吗？我认为没有办法将事件监听器附加到伪元素。生成的内容不会插入DOM，因此JavaScript无法访问其属性/事件/方法…提交此文件时，我只是键入了一个类似的答案。但这行得通吗？填充也会将after元素推出否？@cat否，因为。看起来你在Chrome中发现了一个bug（我已经用解决方法更新了我的答案）。为我工作+1
$("li.before-here").click(function(){ //do something});

a:after {
 pointer-events: none;
}