35

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

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

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

...但它不会是可点击的。

任何人都可以在不更改底层 HTML 的情况下解决这个问题?

编辑:我使用的是 chrome 13.0.782.107。事实证明这是一个错误。(谢谢肖恩)

4

8 回答 8

29

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

根据规范,生成的内容应被视为为其生成元素的元素。我创建了一个JSFiddle来测试这一点,并且在大多数浏览器中为我链接了生成的文本(Chrome 13 是唯一的例外。)我的猜测是您正在 Chrome 中进行测试。这是一个可重现的错误。

解决方法是在链接上简单地指定背景颜色......如果您希望能够对所有链接使用它,声明背景图像(但不指定图像,或使用透明.gif- 或刚刚指出,设置opacity为 1) 以外的任何值都有效

于 2011-08-15T17:20:31.413 回答
3

我有同样的问题,显然如果我设置

a { vertical-align: middle; }

(因此在链接本身,而不是伪元素上),它可以工作。

于 2012-08-09T14:38:39.367 回答
2

只需将其添加到您的 CSS 中:

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

如果 URL 的大小不同,您将不得不使用 javascript 来获取它。

于 2011-08-15T17:43:01.547 回答
2

我希望有人有比这更好的解决方案,但以防万一,我确实想出了这个可怕/蹩脚/骇人听闻的解决方案:

  a {
     margin-right: 40px;
  }

  a:after {
     content: " (" attr(href) ")";
     margin-left: -40px;
  }
于 2011-08-15T17:45:14.220 回答
2

pointer-events如果你在 Wrapper 上有一个链接,那么你可以通过设置为 none来使伪元素可点击。

a:after {
 pointer-events: none;
}
于 2020-08-18T10:34:50.743 回答
1

为避免修改文档树,您可以对a:after.

编辑:这不起作用,因为伪元素没有添加到 DOM 中。

于 2011-08-15T17:34:39.527 回答
0

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

于 2011-08-15T17:19:46.760 回答
0

我分别包装了链接和文本—— :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});

我正在使用它在树中创建一个隐藏/显示切换 - 这为我提供了左侧所需的按钮并允许我链接到父级。

打开带链接的切换

带链接的关闭切换

于 2017-06-20T17:28:53.363 回答