:before blocking anchor tag, changing pointer-events won't work

Issue

I'm trying to make a hovering "card"-like element that you can click on and it'll redirect you. Here's the code: https://jsfiddle.net/gn4kufcy/

My initial problem was due to the card transforming upward. When you hovered your mouse over the bottom of the card, it glitched out. Adding the .servercard:before pseudo element fixed this, but introduced a new problem: now the link doesn't work, as it's covered by the :before element.

The JSFiddle I linked has the card working exactly as intended but I can't click on it.

Other answers on stackoverflow suggested adding the following attribute to my :before element:

pointer-events: none;

This makes the card clickable, but returns the glitchy behavior, which ruins the whole point. I'd like the card to be clickable AND not glitch out when I hover over the bottom, and I've been unable to accomplish this.

Solution

The issues you are facing is due to a concept called stacking context, when you give a child element position, it is stacked over non-positioned siblings.

Now your :before is positioned with position:absolute but siblings are not, so :before is coming on top of the link

There can be other solutions but a simple solution for this case is giving position to the link as well

.servercard a {
    position: relative; /* I added this line */
}

.servercard {
    display:flex;
    background-color: #26282c;
    border-style:solid;
    border-width:1px;
    border-radius:8px;
    width: 18%;
    min-width: 125px;
    color:white;
    transition: background-color .125s,box-shadow .125s, transform .125s;
    position:relative;
    margin-top: 21px;
    margin-left: 16px;
}

.servercard a {
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:start;
    height: 183.41px;
    width: 100%;
    color: inherit;
    text-decoration: none;
    position: relative; /* I added this line */
}

.servercard img {
    margin-top:15px;
    margin-bottom: 20px;
}
  
.servercard:hover {
    transform: translateY(-9px);
    cursor:pointer;
    box-shadow: 0 10px 18px rgba(0,0,0,.35);
    background-color: #1e2023;
    transition: background-color .125s,box-shadow .125s, transform .125s;
    transform-origin: center bottom;
}
  
/* these elements stop the card animation from glitching */
.servercard:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
}
  
.servercard:hover::before {
    height: calc(100% + 1em);
}
  
  
.text {
    word-wrap:break-word;
    max-width:145px;
    margin: 0 auto;
}
  
.servercard img {
    border-radius: 50%;
}

<div class="servercard">
  <a href="https://google.com">
    <img src="https://bellzi.com/cdn/shop/products/Lr-9890-sw.jpg" height=100>
    <p class="text">Test</p>
  </a>
</div>

Answered By - ashish singh