Weird CSS pseudo element scaling behavior - html

Question

I have a pseudo element on an anchor tag with an animated scale transformation, to use as a background for the selected navigation link. This is inside a nav tag which has an animated scale transformation to show and hide it. When I open the nav the position and or scaling of at least one of the pseudo elements is wrong and it appears at the top of the nav during the transition. If I remove the transition from the nav or the pseudo element the problem disappears. The problem only occurs on the opening animation but not the closing one.
The following images show the opening transition:
nav and pseudo element css:
header.navbar nav {
display: inline-flex;
align-items: start;
z-index: 100;
position: fixed;
right: 0;
top: 4rem;
height: calc(100% - 4rem);
flex-direction: column;
width: auto;
background-color: $backgroundColorVariant;
padding: 1em 0;
transform: scaleX(0);
transition: transform $defaultAnimation;
transform-origin: right;
box-shadow: inset 0 25px 15px -26px $shadowColor;
}
header.navbar.open nav {
transform: scaleX(1);
}
a::after {
content: '';
width: 100%;
position: absolute;
left: 0;
transition: transform $defaultAnimation;
}
header.navbar nav a::after {
transform: scaleX(0);
bottom: 0;
height: 100%;
background-color: $backgroundColorTransparent;
transform-origin: left;
z-index: -1;
border-left: 0.5em solid $primaryColor;
}
header.navbar.open nav a:hover::after,
header.navbar.open nav li>a.router-link-active::after {
transform: scaleX(1);
}
Any ideas as to what might be going on are munch appreciated.