css 过渡（悬停和之后）答案

【问题标题】：css transition (hover and after)css 过渡（悬停和之后）
【发布时间】：2021-12-23 16:26:53
【问题描述】：

我想做这样的事情：当光标转到 .list-menu 时，.list-menu::after 将是

content: '';
display: block;
width: 50px;
height: 2px;
background-color: black;

所以我写了这样的代码： (photo link)

.list-menu::after {
    transition: all 5s ease;
}
.list-menu:hover .list-menu::after {
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    background-color: black;
}

但这不起作用，请帮助我

【问题讨论】：

标签： html css properties styles css-transitions

【解决方案1】：

.list-menu:hover:after{
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    background-color: black;
}

https://jsfiddle.net/Markov88/xbvp4oys/8/

【讨论】：