.navlink{
    position: relative;
    display: inline-block;
    opacity: 1;
    transition: opacity .2s ease;
}
.navlink:hover{ opacity: .8; }

/* The animated underline */
.navlink::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-0.45rem;              /* similar to underline-offset-8 */
    height:2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s ease;
}

/* Colors for underline in each navbar */
.navlink.is-hero::after{ background: rgba(255,255,255,.8); }
.navlink.is-white::after{ background: rgba(17,24,39,.6); } /* ~gray-900/60 */

/* Active state shows underline */
.navlink.is-active::after{ transform: scaleX(1); }

/* Page-load animation: start hidden, then reveal */
.navlink.is-animate::after{ transform: scaleX(0) !important; }