ボタンのクリック可能範囲をカード全体に広げたい
概要
カード内にサムネイルや見出し本文等情報があり、詳細へのリンクボタンがあるのですが、クリック可能な範囲はカード全体にしたい！なんてことはよくありますよね。
考えられる対応としてカード全体をaタグで囲むという手法が挙げられると思いますが、今回はあくまでボタンにaタグという状態でクリック可能範囲を広げるスタイルシートを紹介したいと思います。
HTML
<div class="cards">
<div class="card">
<div class="card__thumb">
<img src="/sample/images/css008/yakiniku.jpg" alt="">
</div>
<h3 class="card__heading">
焼き肉
</h3>
<p class="card__text">
焼き肉ってなんでこんなにも美味しいのだろうか。
</p>
<a href="" class="card__link">
美味しい理由
</a>
</div>
...
</div>
CSS
.card {
position: relative;
}
.card__link::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
pointer-events: auto;
content: "";
background-color: transparent;
}
