Хорошего вечера всем!

У меня проблема, не могу самостоятельно разобраться. Существует ссылка, она является "элементом" блока "список" (список меню). До БЭМ ссылка имела анимацию по состоянию :hover, псевдоэлементы before, after окрашивались.

.nav__ul a:after {
    width: 100%;
    height: 2px;
    background-color: #68bdf8;
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    transition: .4s;
    transform: scale3d(0, 1, 1);
    backface-visibility: hidden;
    z-index: -1;
}

.nav__ul a:hover:after {
    transform: scale3d(1, 1, 1);
}

В БЭМ методологии существует реализация присвоения классов __hovered, __focused. Стилизовав эти псевдоэлементы анимации не происходит, скорее всего эти классы имеют статичное состояние.

link__hovered:after {
    width: 100%;
    height: 2px;
    background-color: #68bdf8;
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    transition: .4s;
    transform: scale3d(0, 1, 1);
    backface-visibility: hidden;
    z-index: -1;
}

link__hovered:after {
    transform: scale3d(1, 1, 1);
}

Проект - https://github.com/DjonyBastone/osipbove-bem-project.git Нужное поведение, реализовано через состояние объекта (::hover), а не через класс link__hovered

Я возможно туплю, но мне интересно - как можно реализовать применение классов состояний в работе с псевдоэлементами?