Color Wipe Link
ホバーでテキスト色が左から塗り替わるリンク。
HTML
<a href="javascript:void(0)" class="wipe-link">Discover more</a>
CSS
.wipe-link {
position: relative;
font-size: 16px;
font-weight: 600;
color: #ccc;
text-decoration: none;
background: linear-gradient(90deg, #1a1a1a 50%, #ccc 50%);
background-size: 200% 100%;
background-position: 100% 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: background-position .4s ease;
}
.wipe-link:hover {
background-position: 0 0;
}