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

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

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

Решение

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

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

enter image description here

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

Плохой

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

Злой

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

Хороший

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

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

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

Stretched link (растянутая ссылка)

Сделайте любой элемент HTML или компонент Bootstrap интерактивным, «растягивая» вложенную ссылку с помощью CSS.

Содержание

Добавьте к ссылке .stretched-link , чтобы сделать содержащий ее блок интерактивным с помощью псевдоэлемента ::after . В большинстве случаев это означает, что элемент position: relative; , содержащий ссылку на .stretched-link класс, доступен для нажатия.

Карточки position: relative по умолчанию находятся в Bootstrap, поэтому в этом случае вы можете безопасно добавить .stretched-link класс к ссылке в карточке без каких-либо других изменений HTML.

При растянутых ссылках не рекомендуется использовать несколько ссылок и целей касания. Тем не менее, некоторые position и z-index стили могут помочь если это потребуется.

Card image cap

Card with stretched link

Some quick example text to build on the card title and make up the bulk of the card’s content.

div class="card" style="width: 18rem;"> img src=". " class="card-img-top" alt=". "> div class="card-body"> h5 class="card-title">Card with stretched linkh5> p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.p> a href="#" class="btn btn-primary stretched-link">Go somewherea> div> div>

Большинство пользовательских компонентов position: relative по умолчанию не имеют , поэтому нам нужно добавить .position-relative здесь, чтобы ссылка не выходила за пределы родительского элемента.

Generic placeholder image

Custom component with stretched link

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

div class="d-flex position-relative"> img src=". " class="flex-shrink-0 mr-3" alt=". "> div> h5 class="mt-0">Custom component with stretched linkh5> p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.p> a href="#" class="stretched-link">Go somewherea> div> div>

Generic placeholder image

Columns with stretched link

div class="row g-0 bg-light position-relative"> div class="col-md-6 mb-md-0 p-md-4"> img src=". " class="w-100" alt=". "> div> div class="col-md-6 p-4 pl-md-0"> h5 class="mt-0">Columns with stretched linkh5> p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.p> a href="#" class="stretched-link">Go somewherea> div> div>

Определение содержащего блока

Если кажется, что растянутая ссылка не работает, причиной, вероятно, будет содержащийся блок . Следующие свойства CSS сделают элемент содержащим блоком:

position значение, отличное static
A transform или perspective значение, отличное от none
will-change значение transform или perspective
filter значение, отличное none или will-change значение filter (работает только на Firefox)

Card image cap

Card with stretched links

Some quick example text to build on the card title and make up the bulk of the card’s content.

This stretched link will only be spread over the p -tag, because a transform is applied to it.

div class="card" style="width: 18rem;"> img src=". " class="card-img-top" alt=". "> div class="card-body"> h5 class="card-title">Card with stretched linksh5> p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.p> p class="card-text"> a href="#" class="stretched-link text-danger" style="position: relative;">Stretched link will not work here, because code>position: relativecode> is added to the linka> p> p class="card-text bg-light" style="transform: rotate(0);"> This a href="#" class="text-warning stretched-link">stretched linka> will only be spread over the code>pcode>-tag, because a transform is applied to it. p> div> div>

Разработан и построен с любовью к миру, командой Bootstrap и помощью наших участников.

В настоящее время v5.0.0-alpha1. Код под лицензией MIT, документы CC BY 3.0.

Недорогие домены, регистрация + продление: nadomen.ru

Перевод документации: Голягин Алексей

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

EgoRusMarch

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