伪元素 a:after a:before 允许您添加看起来是链接一部分的文本。但是,我似乎无法找到一种方法使该部分作为链接的一部分可点击。
例如,下面的 css 之后显示了 url:
a:after {
content: " (" attr(href) ")";
}
...但它不会是可点击的。
任何人都可以在不更改底层 HTML 的情况下解决这个问题?
编辑:我使用的是 chrome 13.0.782.107。事实证明这是一个错误。(谢谢肖恩)
伪元素 a:after a:before 允许您添加看起来是链接一部分的文本。但是,我似乎无法找到一种方法使该部分作为链接的一部分可点击。
例如,下面的 css 之后显示了 url:
a:after {
content: " (" attr(href) ")";
}
...但它不会是可点击的。
任何人都可以在不更改底层 HTML 的情况下解决这个问题?
编辑:我使用的是 chrome 13.0.782.107。事实证明这是一个错误。(谢谢肖恩)
我有同样的问题,显然如果我设置
a { vertical-align: middle; }
(因此在链接本身,而不是伪元素上),它可以工作。
只需将其添加到您的 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;
}
pointer-events
如果你在 Wrapper 上有一个链接,那么你可以通过设置为 none来使伪元素可点击。
a:after {
pointer-events: none;
}
为避免修改文档树,您可以对a:after
.
编辑:这不起作用,因为伪元素没有添加到 DOM 中。
:before 和 : after在选择器之前和之后添加内容。在 CSS 中,没有选择器可以让您获取和编辑标签内的内容。实现这一目标的唯一方法是使用 jQuery 或 javascript 来实际编辑 HTML。
我分别包装了链接和文本—— :before 放在容器上,链接放在里面。这样我就可以将 :before 用作 jQuery 跳跳机,将文本用作链接。HTML:
<li class="before-here"><a href="#">My Link Text</a></li>
CSS:
li.before-here:before{ //some css like an image }
查询:
$("li.before-here").click(function(){ //do something});
我正在使用它在树中创建一个隐藏/显示切换 - 这为我提供了左侧所需的按钮并允许我链接到父级。