CSS 文字装饰-改变 background-position 实现文字 hover 动效(反向效果)

PHOTO EMBED

Thu Apr 29 2021 07:50:18 GMT+0000 (UTC)

Saved by @ycljcfer

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <a>Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam</a>, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.</p>
a {
    background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff);
    background-size: 0 3px;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    transition: 1s all;
    color: #0cc;
}

a:hover {
    background-size: 100% 3px;
    color: #000;
}
content_copyCOPY

https://github.com/chokcoco/iCSS/issues/103