.underline-animation { display: inline; vertical-align: baseline; color: #fff; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; transition: background-size 0.3s ease; } .underline-animation:hover { background-size: 100% 1px; }