動くリンク下線

2020.1.29 Wed.

一般的にはtext-decorationプロパティで表示するリンク下線。そのままだとカチッと消えるだけで味気ないですね。リンク下線を、アニメーションしながら出たり入ったりするためのTIPS。

リンク下線を動かすために

text-decorationプロパティのunderlineのままではアニメーションできないので、別の方法で下線を描画することになります。

背景画像で引く下線

リンク下線を動かしたい場合は、背景画像で下線を表示させます。
リンクの文字色と同じ塗り色の1pxのgif画像を底辺に引っ付くように配置して、background-sizeプロパティで横幅いっぱいに広げます。

.text-line a {
	background: url(dot.gif) left bottom / 100% 1px no-repeat;
}

カーソルを乗せた時に、background-sizeの横幅が0になるように指定しておきます。

.text-line a:hover {
	background-size: 0 1px;
}

これをtransitionプロパティでゆっくり変化するように指定すれば出来上がり。ここでは0.4秒で短くなってゆくように指定しています。

.text-line a {
	background: url(dot.gif) left bottom / 100% 1px no-repeat;
	transition: background-size .4s;
}

下線が出たり入ったりするようになりました:)。
上サンプルでは画像の位置が、左下（left bottom）基準になってますが、カーソルを乗せた時だけ、右下（right bottom）基準になるように指定すると、下サンプルのような動きになります。なんだかよりスマートになった気がしますね:D！

.text-line a:hover {
	background-position: right bottom;
	background-size: 0 1px;
}

画像だとめんどくさい

けど、リンクの文字色に合わせて画像も作り直さなきゃいけないのは、ちょっと面倒臭いですね:(
背景画像もCSSで用意すべく、linear-gradient()関数という、CSSでグラデーション画像を生成するための書式を利用します。書き方は下記の通り。下の書き方だと、上から下へロイヤルブルーからスカイブルーへグラデーションする背景画像が生成されます。

.text-line a {
	background-image: linear-gradient(royalblue, skyblue);
}

今回は、リンク色と同じベタ塗り画像を用意したいので、currentColorキーワードを使うと便利です。currentColorはその要素に指定されているcolorプロパティの色のこと。下記のように指定すれば、a要素のcolorと同じ色が、グラデーションの色として適用されます。

.text-line a {
	background-image: linear-gradient(currentColor, currentColor);
}

これを上サンプルの画像を指定してた部分と書き換えれば、これでもうどんな色のリンクでもどんとこいです;)！

.text-line a {
	background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
	transition: background-size .4s;
}

下線とマーカーが入れ替わる

ここでは、背景画像を「,（カンマ）」区切りで複数指定して、片方を1pxの線、もう片方をマーカーみたいな線で、交互に入れ替わるようにしてます。

.text-line a {
	background: linear-gradient(currentcolor, currentcolor) left bottom / 100% 1px no-repeat,
		linear-gradient(lightblue, lightblue) right 60% / 0 .8em no-repeat;
}
.text-line a:hover {
	background-position: right bottom, left 60%;
	background-size: 0 1px, 100% .8em;
}

上下に伸縮する

左右でなく上下に伸縮するようにすれば、もう下線じゃないけど、おもしろい効果になりますねー:D。

リンク範囲を広げる

スマホなど小さなデバイスでもタップしやすいようにリンクエリアを広げると、下サンプルのように、リンク下線ごと広がって、なんだかみっともないです…:‹。※下サンプルではリンク範囲がわかりやすいように背景を白くしてます。

.text-line a {
	padding: 1em;
	background: linear-gradient(currentcolor, currentcolor) 100% 100% / 0 1px no-repeat;
}

リンクエリアを広くしても、リンク下線を元の位置に表示したいとあらば、background-positionプロパティとbackground-sizeプロパティで、背景画像の位置と大きさを調整すれば良いです。
周囲に1文字分のパディングが付いているので、画像位置の基準を1文字分右の、底辺から1文字分上にして、画像の横幅を全幅よりも2文字分狭くなるようにします。

.text-line a {
	padding: 1em;
	background: linear-gradient(currentcolor, currentcolor) 1em calc(100% - 1em) / calc(100% - 2em) 1px no-repeat;
}

カーソルを乗せた時は、画像位置の基準を右から1文字分左に変えて、横幅は0になるようにします。

.text-line a:hover {
	background-position: calc(100% - 1em) calc(100% - 1em);
	background-size: 0 1px;
}

なんだかCSSが計算だらけでごちゃごちゃ嫌だーというならば、a要素の中身をspan要素で括って、span要素にリンク下線を表示すれば、位置を調整しなくてもよいし、わかりやすいです:)。

.text-line a {
	padding: 1em;
}
.text-line a span {
	background: linear-gradient(currentcolor, currentcolor) 100% 100% / 0 1px no-repeat;
}