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

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

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

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

Содержание

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

Плохой

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

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

Злой

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

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

1 месяц·Для продвинутых

Позиционирование в CSS

Получите навык работы с CSS и адаптивными интерфейсами

Посмотреть →

5 месяцев·С нуля

Профессиональная верстка

Адаптивная вёрстка для отображения на любых устройствах

Посмотреть →

10 месяцев·С нуля

Фронтенд-разработчик

Изучите HTML, CSS, JavaScript и React

Посмотреть →

1 месяц·Для продвинутых

Анимация CSS

Освоите CSS-анимации для улучшения UX

Посмотреть →

1 месяц·Для продвинутых

SASS

Освоите препроцессор SASS и стилизацию веб-приложений

Посмотреть →

Каталог

Полный список доступных курсов по разным направлениям

Хороший

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

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

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