WEBデザインに必要なホバー時のアンダーラインをCSSのみで様々な動きを加えました。
カーソルが要素に乗った際に動作します。
実装するためのHTMLとCSSをコピペ出来るようになっていて、カラー変更など自由に出来ます。
BLOGやWEBサイトに使用してユーザビリティをアップさせましょう。
ライン【line】
::afterと::beforeでアンダーラインを指定。
線の太さ
線の太さはp.sample a:beforeのheight: 4px;の変更で調整出来ます。
・動作確認
sampleをPC版はマウスを乗せたとき、スマホ版はタップで確認できます。
中央からアンダーライン
左からアンダーライン
右からアンダーライン
上下からライン
上下左からライン
上下右からライン
上下左右からライン
上下右左からライン
下にアンダーラインフェードイン
下にアンダーラインフェードイン2
左から流れる
↓下記本は自身がこの1冊でゼロからHTML、CSSの基本が身についたお勧めの本です。
▪ゼロから覚えるHTML&CSSの基本
これから本格的にWeb制作を始めたい人が必ず最初に読む本で、知識ゼロでもHTMLコードとCSSでスタイルの適用が書けるようになります。
↓CSSの設計をもっと深く学びたい方はこちらの本がお勧めです。
▪Web制作者のためのCSS設計の教科書
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズで、コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説されています。
よく使うコードは自身のメモ帳などに記述しておいて、コピーペーストで簡単に実装出来るようにすると作業効率がアップします。
