Html 如何使CSS伪元素区域可点击？

这是玩游戏的

我已经创建了

，并使用

.foo:after

我想通过设置一个链接来点击生成的内容

如果我用锚点包装

.foo

，它会在

.foo

和

.foo:after

但是，我想使

.foo:after

区域可单击，而不是

.foo

本身

有没有一种方法可以使用纯CSS实现这一点可能会更改标记？

HTML

<div class="container">
    <a href="http://example.com">
        <div class="foo"></div>
    </a>
</div>

Screeshot

---

这应该会起作用，它会停止可单击的链接，但随后允许使用指针事件属性在伪元素上单击该链接

a {
  pointer-events: none;
}

.foo:after{
    pointer-events: all;
}

---

您应该在链接上放置一个类，这样它就不会影响所有链接。

我确认matchboxhero建议的修复，我也与Roberrrt一样担心

因此，我建议将您的特殊类移动到容器本身，或者更好地将其应用到外部容器

换句话说，您可以在本身获取特殊类（foo）的元素或其子元素上创建特定行为。但不是父母，或之前/之后的兄弟姐妹，或任何其他…：

.foo.container{
宽度：550px；
位置：相对位置；
}
富安分区{
宽度：400px；
高度：150像素；
背景色：#DFBDE0；
}
.foo a div:之后{
内容：“；
位置：绝对位置；
背景色：#CB61CF；
宽度：100px；
高度：100px；
右：0；
}
傅先生{
指针事件：无；
}
.foo a div:之后{
指针事件：全部；
}

---

是否有理由将可单击项设置为：：after

因为，如果不是的话，一个解决办法就是将你的锚放在.foo之后。保持“position:absolute”将使其与：：after项的位置相同，因为锚点仍在container div中

<div class="container">
  <div class="foo"></div>
  <a class="after" href="http://example.com">CLICK ME !</a>
</div>

更新的小提琴：

---

这样，foo div上的指针事件仍然可以发生。（例如，如果是文本，无法选择任何文本都不是最佳的）

答案是否定的。这里有一个很好的解释：。快速修订：这里的另一个答案显示了一个基于单击是否发生在元素内部/外部的解决方法，但这涉及到javascript。您不能将href分配给整个div，但可以将a放入div并使其100%适合该div，然后href将起作用（意味着href适用于该元素，但用户体验与div相同）。然后写css，我并没有要求检测点击事件。我问是否有一种方法，我可以使用CSS或更改标记使该区域可单击。我也解决了这个问题。请重新打开它，我可以回答我的问题。@jcaron我不想禁用可单击行为。我有一个解决我的问题的办法，我改变了标记和一些CSS调整。这是更新后的链接-你能投票让我的问题重新打开吗？这样我就可以添加我的答案了？@KevinB问题是“如何使CSS伪元素区域可点击？”而不是“如何使CSS伪元素可点击？”不管这是否可行，

.foo

在这种情况下是

a

的子元素，这不受

指针事件的影响：无

有趣，当我在他的小提琴链接上尝试它时，它起作用了；D

<div class="container">
  <div class="foo"></div>
  <a class="after" href="http://example.com">CLICK ME !</a>
</div>