リンクの入れ子を行うシンプルなCSS実装

「リンクの入れ子は subgrid が最適解かもしれない」 という記事が流れてきて subgridにこういう使い方もあるのかと驚きました。すごいのでチェックしてみてください。

https://zenn.dev/ixkaito/articles/nested-links-using-subgrid

この手法はリンクなのに説明のテキストを選択できるのがすごいのですが、a要素の内側にp要素を含んでいるのが気になります。

要件によってはテキストの選択はできずともa要素にp要素を含めないシンプルな実装のほうがニーズがあるかもしれません。

というわけでシンプルな実装のサンプルです。

HTMLは従来のコードからp要素をa要素の外に出しています。

<div class="card">
    <a class="link" href="#hello-world">
      <h1>Hello, World!</h1>
    </a>
    <p>aaaaaaaaaa aaaaaa aaaaaaa aaaaaaaaaa aaaaaaaa aaaaa aaaaaaa aa aaaaa aaaaaaaa aaaaaa aaa aaaaaaaa aaaaa aaaaaa aaaa aaa aaaaaaaaaa aaa aaaaaaa aaaaa aaaaaaaa</p>
    <p class="tags">
      <a href="#hello">#hello</a>
      <a href="#world">#world</a>
    </p>
</div>

CSSは以下のようになっています(ポイントだけ抽出)。

疑似要素を使ってa要素をカードサイズまで広げているのが特徴です。

.card {
    position: relative;
    .link::before{
        content:"";
        position: absolute;
        inset: 0;
    }
    .tags a{
        position: relative;
    }
}

一長一短でどちらが良いということはないと思うので要件に応じて使い分けるとよいと思います。