Here is the code scraped from the website that you could embed in your project.
.magic-underline { position: relative; display: inline-block; z-index: 2; padding: 0 4px; color: #020202; font-family: freight-display-pro, sans-serif; font-style: italic; font-weight: 600 !important; transition: all 0.5s ease-out } .magic-underline::before, .name:hover { background: linear-gradient(270deg, #ead642, #ca5f33, #db8c99, #4670aa); background-size: 500% 500% } .magic-underline::before { position: absolute; content: ""; height: 3px; width: 100%; bottom: 0; right: 0.01em; z-index: -1; -webkit-animation: Magic 10s ease infinite; -moz-animation: Magic 10s ease infinite; animation: Magic 10s ease infinite; transition: all 0.3s ease } .magic-underline:hover { color: #fff !important } .magic-underline:hover:before { height: 90% } @-webkit-keyframes Magic { 0% { background-position: 0 50% } 50% { background-position: 100% 50% } 100% { background-position: 0 50% } } @-moz-keyframes Magic { 0% { background-position: 0 50% } 50% { background-position: 100% 50% } 100% { background-position: 0 50% } } @keyframes Magic { 0% { background-position: 0 50% } 50% { background-position: 100% 50% } 100% { background-position: 0 50% } } <div class="magic-underline">travel</div>
Put the CSS in a style block