aタグの中にaタグをJSを使わずに配置したい

Qiita記事を見ていると「なんとなくで書かないで！HTML5を書く時に気にしてみたいタグごとのお約束 - Qiita」で、HTMLを書くときの注意点などが紹介されていました。

ただ「aタグの中にaタグ」の箇所で、JSを使う方法が紹介されていました。
これはJSは使わなくてもできます。
気になったので書いてみました。

まず、aタグの中にaタグはどういう状況か？

例えば、カード全体がクリッカブルエリアになっており、子の要素にもリンクが必要な時です。
HTMLで表現するなら、下記の状態。

しかしHTMLの仕様上、aタグの中にaタグは含められません。
仕様を無視していれても、動作しません。

<a href="" class="card">
  <div class="card-inner">
    <h1 class="card-title">Title Text</h1>
    <ul class="card-tags">
      <li>
        <a href="">tag name</a>
      </li>
      <li>
        <a href="">tag name</a>
      </li>
    </ul>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, dolorum. Facilis assumenda, itaque tempore iste minus, delectus</p>
  </div>
</a>

画像でみてみましょう。

右の赤いエリアの中に、緑のエリアを配置したいのです。
そう、やりたいことの本質は「aタグの中にaタグを配置する」ことではなく、
「クリッカブルエリアの中にクリッカブルエリアを配置したい」です。

対応方法

クリッカブルエリアの中にクリッカブルエリア配置したいのであれば、HTMLをaタグでカードを全体を囲むのをやめます。
見出しなどを囲むのがいいでしょう。

<div class="card">
  <div class="card-inner">
    <!-- aタグをここに移動 -->
    <h1 class="card-title"><a href="">Title Text</a></h1>
    <ul class="card-tags">
      <li>
        <a href="">tag name</a>
      </li>
      <li>
        <a href="">tag name</a>
      </li>
    </ul>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, dolorum. Facilis assumenda, itaque tempore iste minus, delectus</p>
  </div>
</div>

次は、CSSです。
クリッカブルエリアを広げたい領域の .card と子のクリッカブルエリアになる .card-tags a に position: relative; 宣言を指定します。

.card,
.card-tags a {
  position: relative;
}

今度は .card-title a を親のクリッカブルエリアまで広げてみましょう。
これは擬似要素を使用します。

.card-title a:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

これで完成です。
完成したコード - CodePen

このやり方を魔法のように感じる方もいらっしゃると思いますが、CSSの位置決めスキームを利用した方法です。
positionプロパティがわかれば、理解しやすくなるでしょう。

追記: 2022/12/06

今なら、これでいけます。

.card-title a:before {
  content: '';
  position: absolute;
  inset: 0;
}