Increase link clickability area - HTML/CSS

Let's say we have a page with news previews:

It is necessary to make a link not only to the subtitle, but also to the picture.

There are three ways: The Good, the Bad and the Ugly.

The Bad

Just wrap both the title and the picture in a link:

<div>  <a href="#">    <img src="image.jpg">     </a>  <h2>    <a href="#">text</a>  </h2></div>

The Ugly

Wrap everything in one link:

<a href="#">  <img src="image.jpg">   <h2>    text  </h2></a>

The Good

Place the link in the header. Extend the link area to the entire card with the :before pseudo element:

<div>  <img src="image.jpg">   <h2>    <a href="#">text</a>  </h2></div><style type="text/css">  div {    position: relative;  }  a:before {    content: '';    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;  }</style>

Of course I'm exaggerating and you can use any of these three options, but my advice is to use the last one :)