Html 链接不可单击，因为：：Before和：：After

我想在一些内容周围实现一个（我认为）看起来很棒的绘图边框，但这需要使用

：before

和

：：after

。这使得内容元素中的链接无法使用

在这里，我成功地重现了我所说的问题。您可以看到，由于

：：before

和

：：after

的原因，该链接不再可单击。当我删除它将是可点击的，但我想保留我的边界

.text:：before、.text:：after{
-webkit框大小：继承；
框大小：继承；
内容：''；
位置：绝对位置；
宽度：100%；
身高：100%；
}

正文
Lorem Ipsum 123

第一个简单的解决方案是使用

.text{
位置：相对位置；
}
.文本：：之前，
.text：：之后{
-webkit框大小：继承；
框大小：继承；
内容：''；
位置：绝对位置；
宽度：100%；
身高：100%；
指针事件：无；
}

正文
Lorem Ipsum 123

尝试将

指针事件：无

应用于

：：在

之后和

之前

伪元素，如下所示

.text::before, .text::after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none
}

---

您可以添加到链接属性

.text a {
    z-index: 2;
    position: relative;
}

---

这是有效的，我找了1个小时都找不到，但5分钟就得到了答案，我应该早点问。谢谢!@Temani Afif如果它很有趣的话，我从来没有听说过这个房产，对我来说绝对是新的信息，谢谢@Jeremy i使用z-index添加了另一种方法；）@TemaniAfif谢谢，但我想我已经对

指针事件

很满意了。但是如果有一天我需要改变它，我会尝试

z-index

way；）@顺便提一下，我在

z-index:-1方面遇到了一些问题
：在
之前和
：在
之后。我使用
：before
或
：after
为部分父div添加了背景图像，它在任何地方都可以正常工作，但在iPad上不行。我还认为这是解决方案（我的问题中应该说我已经尝试过了），但对我来说不起作用。我已经在谷歌Chrome控制台中检查过了，它工作。@ Heidel在简化的情况下工作，但是他需要考虑他的全部代码来正确使用它。如果你查看他的网站，你会看到链接在
p
元素中，因此他需要将此应用于p。。。这个想法是正确的，但他需要知道在哪里正确应用it@Temani如果我使用了问题中的代码，我没有检查他的网站上的代码。