Link not clickable because ::Before and ::After [duplicate]

Question

I wanted to implement an (I think) awesome looking drawing border around some content but that requires the use of ::before and ::after. This makes my link inside the content element unable to use.

Down here I succeeded in recreating the problem I'm talking about. You can see that the link is not clickable anymore because of the ::before and ::after. When I remove it would be clickable but I would like to keep my border.

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

For people who want to take a look at the border (maybe that would be possible without ::after and ::before. My site is www.tdcdkhd.com. The border/ content I'm talking about is the one in the slide-show banner on the homepage.

Answer 1

The first easy solution is to use 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>

Or play with z-index like this:

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

Answer 2

Try applying pointer-events: none to ::after and ::before pseudo elements like below

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