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

CSS

擬似要素

こんにちは、中の人です。初めての記事投稿になります。
今回は、CSSの擬似要素を用いてテキストリンクに下線を表示させる方法をご紹介します。
擬似要素を上手く活用することでデザインの幅がグッと広がります。

早速ですが、例としてこのような実装方法があります。

シンプルな下線の例

直線

■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;
	height: 1px;
	width: 100%;
}

点線

■HTML
テキストリンク

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

解説

その1の例では擬似要素に対してheightで線幅、widthで線の長さを指定していました。
この場合、CSSでアニメーションを指定しやすいということがメリットになります。

その2の例ではborder-bottomを指定して擬似要素そのものに下線を付ける実装をしています。
アニメーションを指定しない要素の場合はborderプロパティで指定した方がスマートに書けますね。
また、border-bottomに’dotted’を指定して点線を表示していますが、’dashed’や’double’を指定することで線のスタイルを変更することもできます。

今回は2種類の実装方法をご紹介しました。用途や場面に応じて色々と使い分けができそうですね。

心からオススメしたいRecommend

JavaScript

ライブラリ

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

CSS

擬似要素

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

広告PR