.nav a {
    position: relative;
    text-decoration: none;
}

    .nav a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        height: 2px;
        width: 0;
        background: linear-gradient(90deg, var(--accent-3), var(--accent-2), var(--accent));
        transition: width .3s ease;
    }

    .nav a:hover::after,
    .nav a:focus::after {
        width: 100%;
    }