导航栏::after伪元素下划线hover动画反向运行问题咨询

::after是插入在目标元素内容末尾的伪元素，你没有为绝对定位的nav li a::after显式指定左偏移属性left时，它的初始位置默认对齐a标签内容的右边缘。此时宽度从0过渡到固定值的过程中，只会向左延展，自然就会出现从右向左展开的效果。
另外你当前为a标签设置了padding-left: 3em，如果直接给伪元素加left: 0，下划线会对齐a标签的最左边缘（包含内边距区域），无法和文字左对齐，需要同步调整。

你只需要修改两处CSS即可实现预期效果：

nav li a {
    text-decoration: none;
    color: #000000;
    /* 把padding-left改成margin-left，避免下划线和文字不对齐，也可以保留padding-left，给下面的伪元素设left:3em */
    margin-left: 3em;
    position: relative;
    transition: all ease-in-out 250ms;
}

nav li a::after {
    content:'';
    position: absolute;
    display: block;
    height: 0.4em;
    background-color: red;
    bottom: -1em;
    /* 新增left:0，强制伪元素左边缘对齐a标签左边缘 */
    left: 0;
    /* 显式设置初始宽度为0，过渡效果更统一 */
    width: 0;
    transition: all ease-in-out 250ms;
}

nav li a:hover::after {
    width: 60%;
}

如果你不想修改a的内边距配置，也可以直接给nav li a::after设置left: 3em，和a的padding-left参数保持一致即可。

修改完成后，hover时伪元素会从左边缘开始向右增加宽度，完全符合你预期的从左向右展开的动画效果。

内容的提问来源于stack exchange，提问作者user14865888