css transition (hover and after)

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

>Solution :

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

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