https://nickymeuleman.netlify.app/blog/css-animated-wrapping-underline

CSS Link Hover

https://www.cassie.codes/

.css-19gwvxx {
    color: var(--theme-ui-colors-mutedText,#DFE5F3);
    -webkit-text-decoration: none;
    text-decoration: none;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: var(--theme-ui-colors-mutedPrimary,rgb(176,251,188));
    --underlineWidth: 2px;
    --blockLength: 0.75rem;
    background-image: linear-gradient(90deg,rgb(34 43 64),rgb(34 43 64)),linear-gradient(var(--theme-ui-colors-mutedPrimary,rgb(176,251,188)),var(--theme-ui-colors-mutedPrimary,rgb(176,251,188))),linear-gradient(var(--theme-ui-colors-primary,rgb(92,212,125)),var(--theme-ui-colors-primary,rgb(92,212,125)));
    background-repeat: no-repeat;
    background-size: var(--blockLength) var(--underlineWidth),100% var(--underlineWidth),0 var(--underlineWidth);
    background-position: calc(var(--blockLength) * -1) 100%,100% 100%,0 100%;
    -webkit-transition: background-size cubic-bezier(0.39,0.575,0.565,1) 0.3s,background-position cubic-bezier(0.39,0.575,0.565,1) 0.3s,color cubic-bezier(0.39,0.575,0.565,1) 0.3s;
    transition: background-size cubic-bezier(0.39,0.575,0.565,1) 0.3s,background-position cubic-bezier(0.39,0.575,0.565,1) 0.3s,color cubic-bezier(0.39,0.575,0.565,1) 0.3s;
    border: none;
  }
  
  .css-19gwvxx:hover {
    -webkit-text-decoration: none;
    text-decoration: none;
    color: var(--theme-ui-colors-mutedPrimary,rgb(176,251,188));
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: var(--theme-ui-colors-primary,rgb(92,212,125));
    border: none;
    background-size: var(--blockLength) var(--underlineWidth),0 var(--underlineWidth),100% var(--underlineWidth);
    background-position: calc(100% + var(--blockLength)) 100%,100% 100%,0 100%;
}