Css is weird but makes sense

why.md

a:not(.no_default) {
    text-decoration: none;
    color: inherit;
}

a:not(.no_default):hover {
    text-decoration: none;
}

a:not(.no_default).animated {
    position: relative;
    z-index: 1;
    line-height: 1.2;
    text-decoration: none;
    color: var(--purple-200);
    cursor: pointer;
}

a:not(.no_default).animated::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: -3px;
    left: 0;
    background: var(--purple-400);
    visibility: hidden;
    border-radius: 5px;
    transform: scaleX(0);
    transition: 150ms linear;
}

a:not(.no_default).animated:hover::before {
    visibility: visible;
    transform: scaleX(1);
}

has higher priority than referencing an anchor tag later on via classname.

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    text-decoration: none;
}

a.animated {
    position: relative;
    z-index: 1;
    line-height: 1.2;
    text-decoration: none;
    color: var(--purple-200);
    cursor: pointer;
}

a.animated::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: -3px;
    left: 0;
    background: var(--purple-400);
    visibility: hidden;
    border-radius: 5px;
    transform: scaleX(0);
    transition: 150ms linear;
}

a.animated:hover::before {
    visibility: visible;
    transform: scaleX(1);
}

but the problem does not occur here