Практика: карточка с расширенной областью одной ссылки

Назначение

Карточка с единственным переходом может получить большую область нажатия без превращения всего article в самодельную кнопку. При этом ссылка остаётся обычным элементом навигации с понятным текстом.

Как это работает

Псевдоэлемент ссылки растягивается внутри позиционированной карточки. В примере переход ведёт к существующему разделу того же документа. Обработчики JavaScript и дублирующие скрытые ссылки не нужны.

Пример

<style>.linked-card{position:relative;padding:1rem;border:1px solid #8db29b;border-radius:.5rem}.linked-card a::after{content:"";position:absolute;inset:0}.linked-card:focus-within{outline:3px solid #174ea6;outline-offset:3px}</style>
<article class="linked-card"><h3><a href="#linked-lesson">Урок о структуре документа</a></h3><p>Перейдите к короткому учебному объяснению.</p></article><section id="linked-lesson"><h2>Структура документа</h2><p>Начните с понятного порядка разделов.</p></section>

Что должно получиться

Большая часть карточки ведёт по той же ссылке, а в последовательности Tab остаётся один переход. Название урока задаёт доступное имя ссылки.

Граница применения и частая ошибка

Растянутый слой может мешать выделению текста и конфликтовать с другими кнопками внутри карточки. Не используйте этот шаблон для блока с несколькими независимыми действиями без отдельной проработки слоёв. Обычная ссылка с достаточным отступом часто проще.

Самостоятельная проверка

Нажмите на заголовок и свободное место карточки, затем пройдите её клавиатурой. Попробуйте выделить описание. Если выделение или дополнительные действия важны, сравните с вариантом без растянутого псевдоэлемента.

HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.

Связанные материалы

• Ссылки
• Кнопки
• Проверка клавиатурой