Css 从左到右将：：after行从0宽度设置为100%宽度

尝试将伪元素行从左向右扩展到其容器的全宽，然后将其从右向左收缩到零宽。旁注：在JavaScript中，我在超时后添加了“带下划线的动画”类

我试过摆弄一些关键帧

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;}
}

我希望线条从左到右增长到容器的100%宽度，然后从右到左收缩到容器的0%宽度，所有这些都在一个动画中完成

---

上述代码的结果只是一条奇怪的增长和收缩线。

不是设置<代码>宽度的动画，而是设置<代码>右侧到50%关键帧的动画，以及<代码>左侧从<代码>50%关键帧到结尾的动画：

em:：after{
内容：“；
高度：1px；
显示：内联块；
位置：绝对位置；
左：0；
背景：绿色；
过渡：全部；
}
.在…之后{
动画：在动画下加下划线；
}
@关键帧为动画加下划线{
0% {
右：100%；
}
50% {
右：0；
左：0；
}
100% {
右：0；
左：100%；
}
}

---

我是文本

左：首字母；右：0也应该出现在
100%
这里顺便提一句，做同样的事情更容易：需要左/右，因为：然后期望它从右到左收缩嘿！非常感谢您的投入！我想我的问题措辞不恰当。我正试图做到这一点，一旦线在100%，它应该缩小到0%，但从左到右缩小。有了你的投入，它在增长和收缩，但只从左边开始。哦，这太聪明了！谢谢你，Ori Drori！祝你有一个美好的白天或夜晚（无论你来自哪里）。