ホバー時にアンダーラインが中央から左右にスライド
ホバー時にアンダーラインが中央から左右にスライドする表現方法。
Source Code
右上の「コピー」からご利用ください。
コピー
<a class="my-parts" href="#">テキスト</a>コピー
.my-parts {
display: inline-block;
position: relative;
text-decoration: none;
}
.my-parts::after {
position: absolute;
content: '';
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 1px;
background: #3F51B5;
transition: all .3s ease 0s;
}
.my-parts:hover{
cursor: pointer;
}
.my-parts:hover::after {
width: 100%;
}
