リンクとアンダーライン

投稿者: Admin Friday, July 24 2020 @ 05:02 PM JST

自動タグ:[ a-blue:/ pink pink pink ]:
[a-blue:https://www.papalagi.co.jp/ blue blue blue]

自動タグ:[ a-pink:/ pink pink pink ]:
[a-pink:/ pink pink pink]

自動タグ:[ a-yellow:https://www.papalagi.co.jp/ yellow yellow yellow ]:
[a-yellow:https://www.papalagi.co.jp/ yellow yellow yellow]

自動タグ

a-blue:

<a href="#1" class="underline-leftinright underline-height-3px">#2</a>
a-pink:

<a href="#1" class="underline-leftinright underline-color-pink underline-height-3px">#2</a>
a-yellow:

<a href="#1" class="underline-leftinright underline-color-yellow underline-height-3px">#2</a>

cssの例: https://www.ivysoho.net/layout/modern_geek/css/underline.css

  • underline-fadetop underline-color-pink
  • underline-fadebottom underline-color-pink
  • underline-lefttoright underline-color-pink
  • underline-righttoleft underline-color-pink
  • underline-leftinright underline-color-pink
  • underline-rightinleft underline-color-pink
  • underline-center underline-color-pink
  • underline-fadetop underline-color-yellow
  • underline-fadebottom underline-color-yellow
  • underline-lefttoright underline-color-yellow
  • underline-righttoleft underline-color-yellow
  • underline-leftinright underline-color-yellow
  • underline-rightinleft underline-color-yellow
  • underline-center underline-color-yellow
  • underline-leftinright underline-height-1px
  • underline-leftinright underline-height-2px
  • underline-leftinright underline-height-3px
  • underline-leftinright underline-height-4px
  • underline-leftinright underline-height-5px
  • underline-leftinright underline-height-6px
  • underline-leftinright underline-height-7px
  • underline-leftinright underline-height-8px

参考サイト: https://www.nxworld.net/tips/css-hover-underline-animation-examples-and-sass-mixin.html[*1]


Ivy SOHO.net - リンクとアンダーライン
https://www.ivysoho.net/article.php?story=20200724170217472

[*1] https://www.nxworld.net/tips/css-hover-underline-animation-examples-and-sass-mixin.html