こんにちは。ささめまです。
おしゃれサイトでよく見るホバーエフェクトをご紹介します。
（こちらもまた以前制作した銀座 蔦屋書店2020年クリスマス特設サイトに使用したボタンです。）
＼ コピペでそのまま使えます ／
demo
code
<p><a href="#" class="link_text">link text</a></p>.link_text {
line-height: 1.2;
text-decoration: none;
position: relative;
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.link_text::after {
content: '';
width: 100%;
height: 1px;
background: #999;
opacity: 0;
visibility: hidden;
transition: 0.3s;
position: absolute;
bottom: 2px;
left: 0;
}
.link_text:hover {
color: #777;
}
.link_text:hover::after {
bottom: -4px;
opacity: 1;
visibility: visible;
}
comment
マウスオーバーした際の色は、文字と下線が同じ色に見えるように、文字：#777と下線：#999と若干変えています。
あくまで同じ色に見えることを重視！
