Question

伪元素a：在a之后：允许您添加看似属于链接的文本。但是，我似乎无法想出一种方法可以将该部分作为链接的一部分进行点击。

例如，以下css显示了之后的URL：

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

...但它不会被点击。

任何人都可以在不改变基础HTML的情况下解决这个问题吗？

编辑：我使用的是chrome 13.0.782.107。结果证明它是bug。（谢谢肖恩）

Answer 1

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

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

解决方法是简单地在链接上指定背景颜色...如果您希望能够将其用于所有链接，声明背景图像（但不指定图像，或使用透明{{1} } - 或者只是指出，将.gif设置为1 works以外的任何其他内容。

Answer 2

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

a { vertical-align: middle; }

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

Answer 3

只需将此添加到您的css：

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

如果网址的大小不同，则必须使用javascript来获取它。

Answer 4

我希望有人有一个比这更好的解决方案，但为了不是，我确实想出了这个可怕/糟糕/糟糕的解决方案：

  a {
     margin-right: 40px;
  }

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

Answer 5

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

Answer 6

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

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

Answer 7

我将链接和文本分开包装 - 在进入容器之前，链接进入内部。这样我就可以使用：之前作为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});

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

Answer 8

如果在包装程序上有链接，则可以通过将pointer-events设置为无来使伪元素可点击。

a:after {
 pointer-events: none;
}