CSSでテキストにアンダーラインを引く

テキストにかかる太めのアンダーラインを引く実装をしてみます。

サンプルコード

以下のようなテキストの.underline部分にアンダーラインを設定します。

HTML

<p>いつもの朝。いつもの音楽。いつもの自分。<br>
7人の少女たちの安寧は、突如崩壊する。<br>
死して蠢く、ゾンビによって……<br>
否応なく踏み込んだ世界、そこは“最高×最悪のゾンビワールド”<br>
少女たちの願いは、たった一つ。<br>
<span class="underline">「私たち、生きたい。」<br>
これは、少女達が起こす奇跡の物語サガ。</span></p>

アンダーラインにはlinear-gradient()を使い、下半分のみ表示されるようにします。

CSS

.underline {
	background-image: linear-gradient(transparent 50%, yellow 50%);
}

アンダーラインのデモページ

次にオンマウス時にアニメーションでアンダーラインを表示するようにしてみます。

CSS

.underline {
	background-image: linear-gradient(transparent 50%, yellow 50%);
	background-repeat: no-repeat;
	background-size: 200% 100%;
	background-position: 200% 0;
	transition: 1000ms ease-out;
}
p:hover .underline {
	background-position: 100% 0;
}

アニメーションでアンダーラインを表示するデモページ
　

【参考サイト】

• background-position | MDN
• linear-gradient() | MDN