Result
下線がグラデーションになっているかのようにする
疑似要素をグラデーションにして1pxだけすき間を空け、下線がグラデーションになってるかのように見せます
css
a {
color:#111;
display: inline-block;
overflow: hidden;
position: relative;
font-size:2rem;
text-decoration: none;
vertical-align: bottom;
}
a:after {
background: linear-gradient(to bottom, rgba(20, 20, 20, 0.8), rgba(20, 20, 20, 0.8)) center 1.08em/100% 1px no-repeat;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 400%;
will-change: transform;
z-index: -1;
}
a:hover:after {
background-image: linear-gradient(90deg, rgba(122, 95, 255, 0.8) 15%, rgba(1, 255, 137, 0.6) 35%, rgba(122, 95, 255, 0.8) 85%);
}
|
html
<a href="#">hogehoge piyopiyo</a>
|
via
Underline gradient animation
