CSS：ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法 目次

1. Fade Top
2. Fade Bottom
3. Left to Right
4. Right to Left
5. Left in Right
6. Right in Left
7. Center
8. mixin

1. Fade Top

CSS

a {
	position: relative;
	display: inline-block;
	text-decoration: none;
}
a::after {
	position: absolute;
	bottom: 2px;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	background: #333;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
}
a:hover::after {
	bottom: -4px;
	opacity: 1;
	visibility: visible;
}

目次へ

2. Fade Bottom

CSS

a {
	position: relative;
	display: inline-block;
	text-decoration: none;
}
a::after {
	position: absolute;
	bottom: -8px;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	background: #333;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
}
a:hover::after {
	bottom: -4px;
	opacity: 1;
	visibility: visible;
}

目次へ

3. Left to Right

CSS

a {
	position: relative;
	display: inline-block;
	text-decoration: none;
}
a::after {
	position: absolute;
	bottom: -4px;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	background: #333;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform .3s;
}
a:hover::after {
	transform: scale(1, 1);
}

目次へ

4. Right to Left

CSS

a {
	position: relative;
	display: inline-block;
	text-decoration: none;
}
a::after {
	position: absolute;
	bottom: -4px;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	background: #333;
	transform: scale(0, 1);
	transform-origin: right top;
	transition: transform .3s;
}
a:hover::after {
	transform: scale(1, 1);
}

目次へ

5. Left in Right

CSS

a {
	position: relative;
	display: inline-block;
	text-decoration: none;
}
a::after {
	position: absolute;
	bottom: -4px;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	background: #333;
	transform: scale(0, 1);
	transform-origin: right top;
	transition: transform .3s;
}
a:hover::after {
	transform-origin: left top;
	transform: scale(1, 1);
}

目次へ

6. Right in Left

CSS

a {
	position: relative;
	display: inline-block;
	text-decoration: none;
}
a::after {
	position: absolute;
	bottom: -4px;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	background: #333;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform .3s;
}
a:hover::after {
	transform-origin: right top;
	transform: scale(1, 1);
}

目次へ

7. Center

CSS

a {
	position: relative;
	display: inline-block;
	text-decoration: none;
}
a::after {
	position: absolute;
	bottom: -4px;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	background: #333;
	transform: scale(0, 1);
	transform-origin: center top;
	transition: transform .3s;
}
a:hover::after {
	transform: scale(1, 1);
}

目次へ

8. mixin

上で全7種類のアンダーラインアニメーションを紹介してきましたが、以下はこれらを必要に応じて簡単に使用できるようにしたmixinになります。
こういったアニメーションなどは大体サイト内で揃えることが多いですが、たまに場所によって少し動きを変えたいときがあるので、そういったときに便利かと思います。

mixin

SCSS

@mixin hover-underline($type: fade, $dir: null, $weight: 2px, $color: #000) {
	@if $dir == null {
		@if $type == fade {
			$dir: 'top';
		} @else if $type == slide {
			$dir: 'center';
		}
	}

	position: relative;
	display: inline-block;
	text-decoration: none;
	&::after {
		position: absolute;
		left: 0;
		content: '';
		width: 100%;
		height: $weight;
		background: $color;
		@if $type == fade {
			transition: .3s;
			opacity: 0;
			visibility: hidden;
			@if $dir == bottom {
				bottom: $weight * -4;
			} @else {
				bottom: $weight;
			}
		} @else if $type == slide {
			bottom: $weight * -2;
			transform: scale(0, 1);
			transition: transform .3s;
			@if $dir == left-right or $dir == right-in-left {
				transform-origin: left top;
			} @else if $dir == right-left or $dir == left-in-right {
				transform-origin: right top;
			} @else {
				transform-origin: center top;
			}
		}
	}
	&:hover::after {
		@if $type == fade {
			bottom: $weight * -2;
			opacity: 1;
			visibility: visible;
		} @else if $type == slide {
			@if $dir == left-in-right {
				transform-origin: left top;
			} @else if $dir == right-in-left {
				transform-origin: right top;
			}
			transform: scale(1, 1);
		}
	}
}

全体的に条件分岐多めで冗長な感じになってますが、上で紹介した7種類のアンダーラインアニメーションを上記mixinで簡単に利用できるようになり、アニメーション指定に利用するものとして下記4つの引数があります。
それぞれに特定の値を指定することで使用したいアニメーションを呼び出すことができ、主に$typeと$dirで指定された値と条件分岐を使って出力内容が変わるようになっています。

• $type（タイプ）
• $dir（方向）
• $weight（ラインウェイト）
• $color（ラインカラー）

それぞれの引数について説明すると、ひとつ目の$typeはアニメーションのタイプを指定するもので、上で紹介した「Fade Top」と「Fade Bottom」がfade、それ以外の「Left to Right」～「Center」までがslideという形で大きく分類しており、初期値はfadeを指定しています。

ふたつ目の$dirではアニメーションの方向を指定し、ここは$typeで指定した値によって指定できるものが異なります。
$typeでfadeを指定した場合はtopかbottomを、$typeでslideを指定した場合はleft-right, left-in-right, right-left, right-in-left, centerのいずれかを指定します。
$dirの初期値はnullを設定しており、もし指定されなかった場合はデフォルトの動きとして$typeをfadeにしていれば「Fade Top」が、$typeをslideにしていれば「Center」が適用されるような形にしてあります。
また、間違った指定（例えばfadeでleft-rightを指定するなど）をした場合でも、何も指定されなかったときと同じようにデフォルトの動きが適用されます。

みっつ目の$weightはラインウェイトを指定（初期値は2px）するもので、ここで指定した値は単純にラインの太さのために使用するだけでなく表示位置の調整などにも利用しています。

最後の$colorについては、そのままラインカラーを指定（初期値は#000）するものになります。

実際にmixinを使用する場合は、それぞれ下記のように記述していきます。
下記はすべて$weightと$colorの指定は省略したものになりますので、必要であれば例えば@include hover-underline('fade', 'top', 4px, #aaa);のような形で追記してください。

usage

SCSS

// Fade Top
.example01 a {
	@include hover-underline('fade', 'top');
}

// Fade Bottom
.example02 a {
	@include hover-underline('fade', 'bottom');
}

// Left to Right
.example03 a {
	@include hover-underline('slide', 'left-right');
}

// Right to Left
.example04 a {
	@include hover-underline('slide', 'right-left');
}

// Left in Right
.example05 a {
	@include hover-underline('slide', 'left-in-right');
}

// Right in Left
.example06 a {
	@include hover-underline('slide', 'right-in-left');
}

// Center
.example07 a {
	@include hover-underline('slide', 'center');
}

※「Fade Top」は@include hover-underline;、「Center」は@include hover-underline('slide');でも呼び出せます。

以下はこのmixinを用いて指定しているデモで、CodePenなので実際の表示確認するだけでなくちょっとコードを変更して試すこともできます。

目次へ