html - 可以将 a:after/before 伪元素作为链接的一部分点击吗？

Question

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

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

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

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

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

编辑：我使用的是 chrome 13.0.782.107。事实证明这是一个错误。（谢谢肖恩）

score 29 · Accepted Answer

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

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

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

score 3 · Accepted Answer

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

a { vertical-align: middle; }

（因此在链接本身，而不是伪元素上），它可以工作。

score 2 · Accepted Answer

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

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

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

score 2 · Accepted Answer

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

  a {
     margin-right: 40px;
  }

  a:after {
     content: " (" attr(href) ")";
     margin-left: -40px;
  }

score 2 · Accepted Answer

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

a:after {
 pointer-events: none;
}

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

8 回答 8