Делаем вложенные ссылки с помощью псевдоклассов CSS

Мне нравится этот способ тем, что он не нарушает работу браузера и пользователям остаются доступны все привычные им функции: работает клик по ссылке правой кнопкой мыши, работают все предопределённые сочетания клавиш (клик с зажатым Command на маке, например), клик по колесику мыши, тап двумя пальцами по тачпаду макбуков. В общем, ссылки будут открываться так же, как и обычные. Решения на JavaScript, например, ломают весь привычный пользователю функционал браузера.

Разберем простой пример

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

Задача

Сделать весь блок кликабельным, сохранив при этом кликабельность всех внутренних ссылок. Блок должен иметь ссылку, как у заголовка.

В сети встречается множество разных способов решения этой задачи: какие-то мудрёные с кучей CSS и HTML-кода, на уже упомянутом JavaScript. Но есть и простые решения. Одно из них ниже.

Решение

Чтобы было понятнее, я обвел ключевые элементы пунктиром разных цветов.

Вешаем на ссылку заголовка (синий) блочный псевдокласс (оранжевый) с абсолютным позиционированием, растягиваем его по всей площади родительского блока и задаем нулевой слой, чтобы внутренние ссылки (красный) оказались выше и оставались кликабельными.

То есть, все решение сводится к созданию псевдокласса ссылки заголовка.

h3 a:before {
  content: "";
  display: block;
  border: 3px dashed #ffa500;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

Не забудьте задать относительное позиционирование (position: relative;) родительскому блоку, а также всем ссылкам, которые должны быть поверх нулевого слоя.

И ещё, если вдруг среди читателей есть садоводы-огородники, рекомендую посетить сайт Gardennews.ru, на котором собрано множество полезных советов по обустройству дачного участка, выращиванию овощей, растений и цветов.

Подпишитесь на мой телеграм и первыми получайте новые материалы, в том числе которых нет на сайте.