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

Question

这是 FIDDLE 的游戏。

我创建了<div class="foo">并使用.foo:after生成了CSS内容 我想通过设置链接来点击生成的内容。

如果我使用锚定.foo，则会在.foo和.foo:after周围创建一个链接。
不过，我想将.foo:after区域设为可点击，而不是.foo本身。

有没有办法可以使用纯CSS实现这一目标？ 也许更改标记？

HTML

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

CSS

.foo{
    width: 400px;
    height: 150px;
    background-color: #DFBDE0;
}

.foo:after{
    content: "";
    position: absolute;
    background-color: #CB61CF;
    width: 100px;
    height: 100px;
    right: 0;
}

Screeshot

Answer 1

这应该有效，它会阻止链接被点击，但是然后使用pointer-events属性在伪元素上允许它。

a {
  pointer-events: none;
}

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

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

Answer 2

我确认了matchboxhero建议的解决方案，我同意Roberrrt的关注。

因此，我建议将您的特殊课程移至自身，或者更好地将其应用于外部容器。

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

.foo.container{
    width: 550px;
    position: relative;
}

.foo a div {
    width: 400px;
    height: 150px;
    background-color: #DFBDE0;
}

.foo a div:after{
    content: "";
    position: absolute;
    background-color: #CB61CF;
    width: 100px;
    height: 100px;
    right: 0;
}
.foo a {
  pointer-events: none;
}

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

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

Answer 3

是否有理由将可点击的项目设为:: after？

因为，如果没有，解决方法是将你的锚放在.foo之后。保持'position：absolute'赋予它与:: after项相同的位置，因为锚仍然在容器div中。

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

更新的小提琴：here。

这样，foo div上的指针事件仍然会发生。 （如果是文本，比如说，不能选择任何文本就不是最佳的）