下線テキストにホバーアニメーションを実装する方法

CSS

アニメーション

こんにちは、中の人です。
今回は、テキストの下線にホバーアニメーションを実装する方法をご紹介します。

下準備

まずは、擬似要素を用いてaタグに下線を表示させます。
この時、borderプロパティではなくbackgroundプロパティで表示させます。

■HTML
テキストリンク

■CSS
.example-0 {
	line-height: 2.5em;
	position: relative;
}
.example-0:after {
	content: '';
	background: rgba(0, 0, 0, .5);
	position: absolute;
	bottom: 0;
	left: 0;
	height: 1px;
	width: 100%;
}

アニメーションを実装する

サンプル1 – 「transform: scale();」でサイズを可変してみる

■HTML
テキストリンク

■CSS
.example-1 {
	line-height: 2.5em;
	position: relative;
}
.example-1:after {
	content: '';
	background: rgba(0, 0, 0, .5);
	position: absolute;
	bottom: 0;
	left: 0;
	transform: scaleX(0);
	transition: transform .5s ease;
	height: 1px;
	width: 100%;
}
.example-1:hover:after {
	transform: scaleX(1);
}

サンプル2 – 「transform-origin」でhover前とhover後の動きに差を付けてみる

■HTML
テキストリンク

■CSS
.example-2 {
	line-height: 2.5em;
	position: relative;
}
.example-2:after {
	content: '';
	background: rgba(0, 0, 0, .5);
	position: absolute;
	bottom: 0;
	left: 0;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .5s ease;
	height: 1px;
	width: 100%;
}
.example-2:hover:after {
	transform: scaleX(1);
	transform-origin: left;
}

サンプル3 – 「transform: translate();」と「opacity」でフワッと表示させる

■HTML
テキストリンク

■CSS
.example-3 {
	line-height: 2.5em;
	position: relative;
}
.example-3:after {
	content: '';
	background: rgba(0, 0, 0, .5);
	position: absolute;
	bottom: 0;
	left: 0;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .5s ease, transform .5s ease;
	height: 1px;
	width: 100%;
}
.example-3:hover:after {
	opacity: 1;
	transform: translateY(0);
}

解説

今回は、擬似要素をtransformプロパティでサイズや位置を可変させる方法をご紹介しました。
もちろん、過去の記事でご紹介したborderプロパティで下線を表示させる方法にも適用できます。

心からオススメしたいRecommend

JavaScript

ライブラリ

「Luxy.js」を使って慣性スクロールやパララックス効果を簡単に実装してみる

CSS

擬似要素

テキストリンクの下線を擬似要素を用いて表示させる方法

広告PR