CSS pseudo element transform is choppy - html

Question

I have a basic CSS transition where I rotate a pseudo ::after element and increase its width on hover. However the element transition is choppy and skips most of the animation halfway through.
Issue reproduced in a Code Pen.
I've tried using -webkit-backface-visibility: hidden; to solve the issue but I cant seem to stop the transition flash. Any ideas?
Transition css:
a {
position: relative;
text-decoration: none;
color: #db421c;
-webkit-box-shadow: inset 0px 4px 0px #fff;
-moz-box-shadow: inset 0px 4px 0px #fff;
-o-box-shadow: inset 0px 4px 0px #fff;
box-shadow: inset 0px 4px 0px #fff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
a + a {
margin-left: 20px;
}
a::after{
width: 20px;
height: 1px;
content: " ";
background: black;
position: absolute;
-webkit-transform: rotate(90deg) translate(55%, 10%);
-moz-transform: rotate(90deg) translate(55%, 10%);
-o-transform: rotate(90deg) translate(55%, 10%);
transform: rotate(90deg) translate(55%, 10%);
webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
a:last-child::after {
content: none;
}
a:hover {
color: black;
}
a:hover::after {
width: 100%;
height: 2px;
-webkit-transform: rotate(180deg) translate(100%, -20px);
-moz-transform: rotate(180deg) translate(100%, -20px);
-o-transform: rotate(180deg) translate(100%, -20px);
transform: rotate(180deg) translate(100%, -20px);
}

Answer 1

I isolated the issue to the translate transformation; I wasn't sure how exactly to fix it, although I have a feeling the solution is in the transform-origin property. The only working solution I was able to come up with was to use positioning in order to move the pseudo elements. The same rotation is being used, we are just making use of the absolute positioning in order to translate the elements. This method doesn't have any apparent issues given that the parent element is relatively positioned. This method should also work for elements with varying widths.
UPDATED EXAMPLE HERE - it achives the exact same effect without the choppiness.
Instead of translate(55%, 10%), use top: 10px/right: -22px
And instead of translate(100%, -20px), use top: 22px/right: 0px
Updated CSS
a::after {
width: 20px;
height: 1px;
content: " ";
background: black;
position: absolute;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
top: 10px;
right: -22px;
}
a:hover::after {
width: 100%;
height: 2px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
top: 22px;
right: 0px;
}