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

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

Если нет возможности изменить HTML-разметку или обернуть весь блок тегом <a>, задачу можно решить исключительно средствами CSS.

Исходная разметка

Например, карточка имеет следующую структуру:

<div class="element">
    <div class="image-table">
        ...
    </div>

    <div class="text-wrap">
        <div class="name">
            <a href="/korporativnyy-sayt/">
                Корпоративный сайт
            </a>
        </div>

        <div class="text">
            Для компаний и организаций
        </div>
    </div>
</div>

По умолчанию кликабельным будет только текст ссылки.

Решение

Используем псевдоэлемент ::before, который растягивается на всю площадь блока - родителя.

.links .element {
    position: relative;
}

.links .element a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

Теперь область ссылки занимает весь блок, хотя HTML остается неизменным.

Почему это работает

Псевдоэлемент ::before становится частью ссылки и абсолютно позиционируется относительно родительского элемента. Благодаря этому браузер считает кликом по псевдоэлементу клик по самой ссылке.

Добавляем эффект наведения

Чтобы пользователь понимал, что карточка полностью кликабельна, можно добавить плавное выделение при наведении.

.links .element {
    position: relative;
    border-radius: 10px;
    transition: .25s;
}

.links .element:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    transform: translateY(-3px);
}

Преимущества способа

• не требуется изменять HTML;
• не нарушается структура страницы;
• решение работает практически во всех современных браузерах;
• легко применяется к любым карточкам и плиткам.

Подобные решения позволяют сделать интерфейс сайта более удобным и повысить взаимодействие пользователей с элементами страницы. Мы применяем такие приемы при разработке корпоративных сайтов и интернет-магазинов, уделяя внимание не только внешнему виду, но и удобству использования.