可能使一个：之后/之前伪元素可点击作为链接的一部分？ [英] Possible to make a:after/before pseudo elements clickable as part of the link?

问题描述

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

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

  a：after {
 content：（attr（href））; 
} 
  

...但不可点击。

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

编辑：我使用chrome 13.0.782.107。原来它是一个错误。 （感谢Sean）

解决方案

看起来您在使用的浏览器中发现了错误。 p>

根据规范，生成的内容应该被视为正在为其生成的元素的子。我创建了一个 JSFiddle 来测试这个问题，在大多数浏览器中为我生成的文本是链接的（Chrome 13是单独的异常。）我的猜测是，你正在Chrome中测试。这是一个可重现的错误。

解决方法是简单地指定链接上的背景颜色...如果你想能够使用这个链接，背景图像（但不指定图像，或使用透明 .gif - 或者刚刚指出，设置 opacity 除了1）工作。

pseudo elements a:after a:before allow you to add text that appears to be part of the link. However, I can't seem to figure out a way to make that portion clickable as part of the link.

For example the following css shows the url afterward:

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

...but it will not be clickable.

Anyone get around this without changing underlying HTML?

Edit: I am using chrome 13.0.782.107. It turns out it's a bug. (Thanks Sean)

解决方案

It looks like you have discovered a bug in the browser you are using.

Based on the spec, the generated content should be treated as a child of the element it is being generated for. I created a JSFiddle to test this out, and the generated text is linked for me in most browsers (Chrome 13 being the solitary exception.) My guess is that you are testing in Chrome. This is a reproducible bug.

The workaround is to simply specify a background color on your links ... if you want to be able to use this for all links, declaring a background image (but not specifying an image, or using a transparent .gif - or as just pointed out, setting opacity to anything other than 1) works.

这篇关于可能使一个：之后/之前伪元素可点击作为链接的一部分？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！