ストレッチリンクを使ってリンクの中にリンクがある場合の実装をする

以前にリンクの中にリンクがある場合の実装方法の記事を投稿しましたが、Bootstrapのストレッチリンク(.stretched-link)を使うことでJavaScriptを使わずにリンクの入れ子のような設定ができるようだったので、実装を試してみます。

サンプルコード

ストレッチリンクはリンクの疑似要素を本来のリンク範囲外に広げることで、クリックできる範囲を広げる仕組みになっています。
以下のようなHTMLで、.article-ttlのaタグのリンクを.article全体に広げて、その中に.article-tagsのaタグのリンクがあるような状態にしたいとします。

<div class="article">
	<h2 class="article-ttl">
		<a
			class="stretched-link"
			href="https://www.youtube.com/@IshigamiNozomi"
		>
			石神のぞみ
		</a>
	</h2>
	<p class="article-description">
		悪魔と⼈間のハーフ​
		という設定でSNS上で活動している。
		本当はただの⼈間だが、魔力が宿っていると信じている。​
		左腕の包帯は悪魔の⼒を封じている。
	</p>
	<ul class="article-tags">
		<li><a href="https://x.com/I_Nozomi_">X(旧Twitter)</a></li>
	</ul>
</div>

.article {
	position: relative;
}
.stretched-link::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 1;
}
.article-tags a {
	position: relative;
	z-index: 2;
}

.stretched-linkの::after疑似要素を広げて、.articleにposition: relativeを指定して.article内に収まるようにしています。
これだけだと.article-tagsのリンクの上に.stretched-linkの疑似要素が重なった状態になってしまうので、.stretched-linkのaタグの重なり順を上になるように調整しています。
ストレッチリンクでリンク内にリンクがある設定をするデモページ