<p>
<a class="anim-underline-fx" href="#0">Как создать эффект заливки подчеркивания в CSS</a>
</p>
/* 💡 Как создать эффект заливки подчеркивания в CSS */
/* 🔗 https://s-sd.ru/blog_studio_design/ehffekt-zalivki-podcherkivaniya/ */
.anim-underline-fx {
/* reset */
color: darkblue;
text-decoration: none;
/* filling effect */
background-image: linear-gradient(to right, darkblue 50%, lightsteelblue 50%);
background-size: 200% 3px;
background-repeat: no-repeat;
background-position: 100% 100%;
transition: background-position 0.3s;
}
.anim-underline-fx:hover {
background-position: 0% 100%;
}
/* demo stuff */
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
padding: 1rem;
font-family: Arial;
}
p {
max-width: 480px;
margin: 0px auto;
font-size: 2rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.