html - 可以制作 :after/before pseudo elements clickable as part of the link?

Question

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

例如，下面的 css 显示之后的 url:

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

...但它不会被点击。

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

编辑:我使用的是 chrome 13.0.782.107。原来是bug . (感谢肖恩)

Answer 1

您似乎发现了所用浏览器的错误。

基于spec ，生成的内容应被视为为其生成的元素的子。我创建了一个 JSFiddle对此进行测试，并且在大多数浏览器中为我链接了生成的文本(Chrome 13 是唯一的异常(exception)。)我猜你正在 Chrome 中进行测试。这是一个可重现的错误。

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