【CSS】aタグの範囲を疑似要素で広げる

どうも、くまだです。

今回は疑似要素を使ってaタグのリンク範囲を広げる方法について書きます。基本的な知識でできる小技みたいなものなので、頭の片隅に置いておけばよいかと。

aタグで疑似要素の範囲を広げる方法

例えば、Webサイトでよく見かける「お知らせ」みたいなカードタイプのもので、以下のようによく書くと思います。

〇 パターン1：aタグ全体で囲むパターン

    <a href="" class="card">
      <div class="card__imgbox">
        <img src="images/sample.png" alt="">
      </div>
      <h3 class="card__title">タイトル</h3>
      <p class="card__text">説明文説明文説明文説明文</p>
    </a>

.card {
  position: relative;
  display: block;
  max-width: 400px;
  width: 100%;
  transition: all .4s;

}

.card:hover {
    background: red;
}


.card__imgbox {
  position: relative;
  width: 100%;
}
.card__imgbox::before {
  padding-top: 56.25%;
  display: block;
  content: '';
}
.card__imgbox img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-position: center;
}

もしくは、詳しく見る、みたいなボタンがあるパターン

〇 パターン2：カードの中にaタグのボタンがある

CSSはパターン1と同じです。

    <div class="card">
      <div class="card__imgbox">
        <img src="images/sample.png" alt="">
      </div>
      <h3 class="card__title">タイトル</h3>
      <p class="card__text">説明文説明文説明文説明文</p>
      <a href="" class="card__link">詳しく見る</a>
    </div>

パターン2の場合、aタグの範囲は詳しく見るの範囲に限られます。（aタグをホバーしたとき、カーソルがポインターに変化）

パターン2の状態で、パターン1のようにカード全体にリンクの範囲を設定したい場合は次のように書きます。

〇パターン3：aタグのリンク範囲を疑似要素で広げる

    <div class="card">
      <div class="card__imgbox">
        <img src="images/sample.png" alt="">
      </div>
      <h3 class="card__title">タイトル</h3>
      <p class="card__text">説明文説明文説明文説明文</p>
      <a href="" class="card__link">詳しく見る</a>
    </div>

.card {
  position: relative;
  display: block;
  max-width: 400px;
  width: 100%;
  transition: all .4s;

}


.card__imgbox {
  position: relative;
  width: 100%;
}
.card__imgbox::before {
  padding-top: 56.25%;
  display: block;
  content: '';
}
.card__imgbox img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-position: center;
}

.card__link::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  transition: all .4s;
}

.card__link:hover::before {
  background: red;
  opacity: .5;
}

aタグに疑似要素を設定してリンクの範囲をカード全体に広げることができます。

パターン1の場合、カード全体がaタグで囲まれていますが、その中にaタグをいれるのはhtmlの入れ子ルール的に難しい。

パターン2の場合、aタグをカードの中にいれることはできるけどリンクの範囲はaタグ部分のみ。

制作案件の場合によっては、aタグの詳しくみるを設置した上でカード全体にリンクを広げる、というケースでパターン3が使えます。

ここまで読んでくださりありがとうございました。