css transition (hover and after)-CodePudding

I want to make something like this: when the cursor goes to .list-menu, .list-menu::after will be

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

so I wrote the code like this : (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;
}

but this doesn't work, please help me

CodePudding user response：

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

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