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

Question

这是玩耍的FIDDLE.

我已创建<div class="foo">并使用生成的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>

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>