ボタン/リンク

2022.02.09

テキストリンクのアレンジまとめ

記事の本文中やサイトマップなどに入れることが多いテキストリンク。
CSSだけでできる動きやアイコンをつけたものをまとめてみました!

見た目のアレンジ

text-decolationで下線を引く

IEに対応しない場合、text-decorationプロパティを使用して下線をアレンジすることができます。
text-underline-offsetプロパティでテキストとの余白、text-decoration-styleプロパティで線の種類を指定することが可能です。

動きのアレンジ

見た目にアレンジを加えるだけでなく、動きのアレンジも取り入れることでどのリンクを選択しているかがわかりやすくなります!

ホバーで下線が動く

text-decolationではなく、beforeを使うことでホバーで下線を動かすことができます。

関連記事

  • 2021.12.27

    シンプルな見出しのアイデアまとめ

  • 2022.02.09

    テキストリンクのアレンジまとめ

  • 2022.01.20

    シンプルなボタンのアイデアまとめ

  • 2022.01.13

    シンプルなリストのアイデアまとめ

KEY WORD

WPサービス

×