Read more cover link

css

Let's say you have a card with a title and a 'Read more' link. You want the whole card to be clickable. You can use the following CSS to make the whole card clickable:

<div class="card">
  <h2>Post title</h2>
  <a href="url/to/post">Read more</a>
</div>

With this you only need 1 hyperlink element, neat right?

.cover-link {
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
  }
}

Because having multiple links is dirty this makes it a good way to make whole thing clickable. Make sure the card has position relative though.

And use some focus styling like so:

.card {
  &:has(a:hover),
  &:has(a:focus) {
    transform: scale(1.05);
  }
}