top | item 41513658

(no title)

stevesunderland | 1 year ago

You can also do Solution 1 without JavaScript by using a CSS pseudo selector on the anchor tag:

    tr {
        position: relative;
    }

    a:before {
        content: "";
        position: absolute;
        top: 0; bottom: 0;
        left: 0; right: 0;
    }
https://codepen.io/stevesunderland/pen/oNrVQrp

discuss

order

extra88|1 year ago

Yep, basically the "block links" technique used to make clickable cards. A downside is it prevents selecting any text covered by the pseudo-element; the JavaScript technique can have the same problem.

> top: 0; bottom: 0; > left: 0; right: 0;

You can replace this with inset: 0;

stevesunderland|1 year ago

Thanks for the tip! That will save me quite a few keystrokes :)

I don't see any issues selecting the text?