Увеличить зону кликабельности ссылки — HTML/CSS⁠⁠

Допустим у нас есть страница с превью новостей:

Необходимо сделать ссылкой не только подзаголовок, но и картинку.

Способа три: плохой, злой, хороший.

Плохой

Просто обернуть и заголовок, и картинку в ссылку:

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

Злой

Обернуть все в одну ссылку:

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

Хороший

Разместить ссылку в заголовке. Расширить область ссылки на всю карточку с помощь псевдоэлемента :before:

<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>

Конечно я утрирую и вы можете использовать любой из этих трех вариантов, но мой совет использовать последний :)