Как сделать блок кликабельным с помощью псевдоэлемента

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

enter image description here

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

Плохой

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

Злой

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

Хороший

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

div  position: relative; > a:before  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; >

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

Как сделать, чтобы слой целиком был ссылкой?

Сделать блочный элемент, который целиком является ссылкой на указанную страницу.

Решение

При размещении ссылки внутри слоя заданных размеров, иногда возникает задача, чтобы ссылкой был не только текст, но и сам слой. Особенно это бывает актуально при создании различных меню. Для изменения вида ссылки к селектору A в стилях следует добавить свойство display со значением block , чтобы превратить ссылку в блочный элемент. Такой элемент по умолчанию занимает всю свободную ширину внутри родителя. Также необходимо указать height : 100% , ссылка после этого будет занимать всю доступную высоту внутри слоя (пример 1).

Пример 1. Ссылка внутри слоя

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Слой-ссылка   Ссылка

Результат примера показан на рис. 1. Обратите внимание, что курсор мыши превращается в указатель внутри слоя целиком, а не только на тексте, как это происходит с обычными ссылками.

Как сделать кликабельным весь блок li, а не только вложенную в него а?

EgoRusMarch

Мне кажется вы не совсем понимаете что вам надо сделать. Вам не надо задавать высоту и ширину li вам надо сделать это для ссылки. т.е. оставить li со стилями типа display:inline-block; а все стили которые вы хотите применить к li применить к ссылке внутри. И тогда li не будет иметь никаких стилей а ссвлка просто разойдется по всей ширине и высоте этого пункта

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

Известно, что HTML не позволяет делать вложенные ссылки. Есть разные способы обхода этого ограничения. Я покажу самый простой — с помощью псевдоклассов CSS.

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

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

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

Задача

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

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

Решение

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

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

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

h3 a:before

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

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

⚡️ Подписывайся на мой канал @DanilinBiz и ты узнаешь, как зарабатывать достойные деньги на фрилансе.

Автор Иван Данилин

Делаю сайты на Вордпресс с 2008 года, в том числе уникальные инструменты для решения сложных бизнес‑задач.