链接不可点击，因为 ::Before 和 ::After

Question

我想在某些内容周围实现一个（我认为）很棒的绘图边框，但这需要使用::before和::after。这使我的内容元素内的链接无法使用。

在这里，我成功地重现了我正在谈论的问题。您可以看到由于::before和，该链接不再可点击::after。当我删除它时可以点击但我想保留我的边框。

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

<div class="text">
  <h1>Text</h1>
  <p>Lorem Ipsum 123</p>
  <a href="https://stackoverflow.com">Link</a>
</div>

对于想要查看边框的人（也许没有::after和也可以::before。我的网站是www.tdcdkhd.com。我正在谈论的边框/内容是主页幻灯片横幅中的内容.

Answer 1

第一个简单的解决方案是使用 pointer-events: none;

.text {
  position: relative;
}

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

<div class="text">
  <h1>Text</h1>
  <p>Lorem Ipsum 123</p>
  <a href="https://stackoverflow.com">Link</a>
</div>

或者像这样使用 z-index：

.text {
  position: relative;
  z-index: 0;
}

.text::before,
.text::after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

<div class="text">
  <h1>Text</h1>
  <p>Lorem Ipsum 123</p>
  <a href="https://stackoverflow.com">Link</a>
</div>