Тяни ссылку, а не оборачивай

Как сделать кликабельной не только ссылку, но и картинку у карточки?

Ссылку можно:

  • добавить вокруг картинки, ❌
  • обернуть вокруг всей карточки, ❌
  • и растянуть. ✔️

Растягиваем ссылку по всей карточке

<div class="card">
  <img 
    class="card__picture" 
    src="https://images.unsplash.com/photo-1544436595-18448ba66450" 
    width="100" 
    height="100" 
    alt=""
  >
  <h2 class="card__header">
    <a href="#" class="card__link">Самая лучшая ссылка</a>
  </h2>
</div>
.card {
  position: relative;
}

.card__link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Посмотреть пример на jsfiddle.net

Поделиться
Отправить