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

В этой статье расскажу о трех способах растянуть ссылку на всю площадь элемента.

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

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

Содержание

• Плохой
• Злой
• Хороший

Плохой

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

div
  a(href="#")
    img(src="image.jpg")
  h2
    a(href="#") text

Злой

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

a(href="#")
  img(src="image.jpg")
  h2 text

Хороший

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

div
  img(src="image.jpg")
  h2
    a(href="#") text

div {
  position: relative;
}

a:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Можно использовать любой из этих трех способов, но лично я предпочитаю последний.