Увеличить зону кликабельности ссылки — 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>
Конечно я утрирую и вы можете использовать любой из этих трех вариантов, но мой совет использовать последний :)
