CSS transition实现.list-menu hover时::after伪元素效果失效求助

问题原因 #

你的代码核心错误是悬浮状态的伪元素选择器写法不符合需求：
.list-menu:hover .list-menu::after 的匹配逻辑是选中被悬浮的.list-menu内部的子级.list-menu的::after伪元素，而你需要匹配的是被悬浮的.list-menu自身的::after伪元素。

另外还有两个影响效果的细节问题：

1. ::after伪元素必须在默认状态就声明content属性，哪怕是空值，否则伪元素不会被渲染，过渡效果也无法生效
2. 你设置的5s过渡时长太长，这类下划线交互一般设置0.3s左右体验更好，可按需调整

修正后代码 #

/* 伪元素基础样式 */
.list-menu::after {
    content: '';
    display: block;
    height: 2px;
    background-color: black;
    width: 0; /* 初始宽度设为0，实现从无到有的过渡效果 */
    transition: all 0.3s ease;
}

/* 悬浮状态样式：正确选择器直接在:hover后拼接::after，指代当前元素自身的伪元素 */
.list-menu:hover::after {
    width: 50px;
}

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