リンクのクリック領域を増やす

ニュースプレビューのページがあるとしましょう.

字幕だけでなく映像にもリンクを作る必要があります.
つの方法があります:良い、悪いと醜い.

悪い

タイトルと写真をリンクでラップするだけです.

<div>
  <a href="#">
    <img src="image.jpg">   
  </a>
  <h2>
    <a href="#">text</a>
  </h2>
</div>

醜い

すべてを1つのリンクでラップします.

<a href="#">
  <img src="image.jpg"> 
  <h2>
    text
  </h2>
</a>

良い

リンクをヘッダーに置きます.:before擬似要素を使用して、カード全体にリンク領域を拡張します.

<div>
  <img src="image.jpg"> 
  <h2>
    <a href="#">text</a>
  </h2>
</div>

<style type="text/css">
  div {
    position: relative;
  }

  a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

もちろん、私は誇張しています、そして、あなたはこれらの3つのオプションのどれでも使用することができます、しかし、私のアドバイスは最後のものを使用することです: