テキストリンク

text_link

CSS

アニメーション

2020/04/20

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

こんにちは、中の人です。 今回は、テキストの下線にホバーアニメーションを実装する方法をご紹介します。 もくじIndex 下準備 サンプル1 – 「transform: scale();」でサイズを可変してみる サンプル2 – 「transform-origin」でhover前とhover後の動きに差を付けてみる サンプル3 – 「transform: translate();」と「opacity」でフワッと表示させる 解説 下準備 まずは、擬似要素を用いて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プロパティで下線を表示させる方法にも適用できます。 テキストリンクの下線を擬似要素を用いて表示させる方法

CSS

擬似要素

2020/04/19

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

こんにちは、中の人です。初めての記事投稿になります。 今回は、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