Full div clickable issue conflicting with position: absolute button

Hi,

I’m trying to make a full .service-card container clickable on my homepage (3-column grid layout), based on this guide: https://generatepress.com/forums/topic/making-full-div-clickable/

The approach works in general, but I’m running into an issue when combining it with an position: absolute; button inside the card.

Current setup:

Each card looks like this structure

– Container (.service-card)
— Heading <h2>
— Heading <p>
— Button (.card-arrow)

Custom CSS used:

.service-card {
    position: relative;
}
.card-arrow {
    position: absolute;
    right: 44px;
    bottom: 44px;
    z-index: 2;
}
.card-arrow::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

And for the full-card clickable behavior I’m trying to use the ::before pseudo-element approach (overlay on the parent container).

Problem:

When I apply the full clickable container technique (using ::before on .card-arrow), the clickable behavior stops working correctly or becomes inconsistent.

It seems the issue happens because the .card-arrow also has position: absolute;

Expected result:

• Entire .service-card should be clickable (like a card link)
• The .card-arrow should remain positioned bottom-right

Could you help resolve this please?