Issue with adding pseudo element to mega menu items.

Hello,

I’d like to add a ::after pseudoelement to make a border bottom animation. I can do this with no problem with a normal menu, but with this one. I add the after with css, but nothing happens. I’d like to know why and how can I solve this.

This is the css I used.

#mega-menu-primary li{
    position:relative;
}

#mega-menu-primary li::after {
    content: '';
    position: absolute;
    width: 0px;
    height: 3px;
    left: 50%;
    bottom: 0;
    background-color: #fdcf00;
    border-radius: 5px;
    transition: all ease-in-out .2s;
}

#mega-menu-primary li:hover::after {
    width: 100%;
    left: 0;
}

Thank you for your time.