Desiring to create a pseudo-element line that expands from left to right across its container, then contracts from right to left back to zero width. Note: in my JavaScript code, I apply the "underlined-animated" class after a specific timeout.
I've experimented with various keyframes in an attempt to achieve the desired effect.
em::after {
content: "";
height: 1px;
width: 0;
display: inline-block;
position: absolute;
left: 0;
background: green;
transition: all;
}
.underlined-animated::after {
animation: underline-animated 5s forwards;
}
@keyframes underline-animated {
0% {width: 0;}
50% {width: 100%; left: initial; right:0;}
100% {width: 0;}
}
The intended outcome is for the line to expand smoothly from left to right until it reaches 100% width of the container, and then contract from right to left until it returns to 0% width – all within a single animation sequence.
However, the current implementation results in a peculiarly growing and shrinking line instead.