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;

＆＃13;

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

＆＃13;

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

＆＃13;

或者像这样玩z-index：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

尝试将Fri Feb 23 2018 00:50:00 GMT+0200应用于pointer-events: none和::after伪元素，如下所示

::before

Answer 3

您可以添加到链接属性

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

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

3 个答案: