Html 是否可以将 a:after/before 伪元素作为链接的一部分单击？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7068091/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Possible to make a:after/before pseudo elements clickable as part of the link?
提问by Catskul
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.
伪元素 a:after a:before 允许您添加似乎是链接一部分的文本。但是，我似乎无法找到一种方法来使该部分作为链接的一部分可点击。
For example the following css shows the url afterward:
例如，下面的 css 显示了之后的 url：
a:after {
content: " (" attr(href) ")";
}
...but it will not be clickable.
...但它不会被点击。
Anyone get around this without changing underlying HTML?
有人在不改变底层 HTML 的情况下解决这个问题吗？
Edit: I am using chrome 13.0.782.107. It turns out it's a bug. (Thanks Sean)
编辑：我正在使用 chrome 13.0.782.107。事实证明这是一个错误。（谢谢肖恩）
采纳答案by Sean Vieira
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 childof the element it is being generated for. I created a JSFiddleto 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.
根据规范，生成的内容应被视为正在为其生成的元素的子元素。我创建了一个JSFiddle来测试这个，并且生成的文本在大多数浏览器中为我链接（Chrome 13 是唯一的例外。）我猜你是在 Chrome 中测试。这是一个可重现的错误。
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 opacityto anything other than 1) works.
解决方法是简单地在链接上指定背景颜色……如果您希望能够将其用于所有链接，请声明背景图像（但不指定图像，或使用透明的.gif- 或者正如刚刚指出的那样，设置opacity为 1) 以外的任何内容都有效。
回答by Tom
I've had the same problem and apparently if I set
我遇到了同样的问题，显然如果我设置
a { vertical-align: middle; }
(thus on the link itself, notthe pseudo element), it works.
（因此在链接本身，而不是伪元素），它的工作原理。
回答by Knu
Just add this to your css:
只需将其添加到您的 css 中：
a {padding-right:Ypx} /* Y = size of your url in pixels */
If the size of the URL varies you will have to use javascript to get it.
如果 URL 的大小不同，您将不得不使用 javascript 来获取它。
回答by Catskul
I'm hoping someone has a better solution than this, but just in case not, I did come up with this horrible/crappy/hacky solution:
我希望有人有比这更好的解决方案，但以防万一，我确实想出了这个可怕/蹩脚/骇人听闻的解决方案：
a {
margin-right: 40px;
}
a:after {
content: " (" attr(href) ")";
margin-left: -40px;
}
回答by Daniel Lefebvre
I wrapped the link and the text separately -- the :before goes on the container and the link goes inside. This way I can use the :before as a jQuery tigger and the text as a link. HTML:
我将链接和文本分开包装—— :before 放在容器上，链接放在里面。这样我就可以将 :before 用作 jQuery tigger，将文本用作链接。HTML：
<li class="before-here"><a href="#">My Link Text</a></li>
CSS:
CSS：
li.before-here:before{ //some css like an image }
Jquery:
查询：
$("li.before-here").click(function(){ //do something});
I'm using this to create a hide/show toggle in a tree -- this gives me the button I need on the left and allows me to link to the parent.
我正在使用它在树中创建隐藏/显示切换 - 这为我提供了左侧所需的按钮并允许我链接到父级。
回答by paulmelnikow
To avoid modifying the document tree, you could use a JavaScript click handler for a:after.
为避免修改文档树，您可以为a:after.
Edit:This doesn't work, because pseudo elements aren't added to the DOM.
编辑：这不起作用，因为伪元素未添加到 DOM。
回答by Dan Short
The :before and :after add content beforeand afterthe selector. In CSS, there's no selector that let's you get and edit the content inside a tag. The only way to make that happen would be with jQuery or javascript to actually edit the HTML.
的：前和：后添加内容之前和之后的选择。在 CSS 中，没有选择器可以让您获取和编辑标签内的内容。实现这一目标的唯一方法是使用 jQuery 或 javascript 来实际编辑 HTML。
