Custom Styling Links

Hello,
Im trying to customize my navigation to the links have an “Overline” I found the css below (https://www.elegantthemes.com/blog/divi-resources/beautiful-css-hover-effects-you-can-add-to-your-divi-menus) and tried adding to custom styling tab but I cant seem to get it working. I know the css ids are not correct, but I cant figure which ones to use to make this happen. The below code is actually for an underline but I intend to adjust the positioning as soon as I can figure how to get this working.

Any info pointing me in the right direction would be greatly appreciated. Thank You in advance.

#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
content: “”;
position: absolute;
z-index: 2;
left: 0;
right: 0;
}
#top-menu li a:before {
content: “”;
position: absolute;
z-index: -2;
left: 0;
right: 100%;
bottom: 50%;
background: #15bf86; /*** COLOR OF THE LINE ***/
height: 3px; /*** THICKNESS OF THE LINE ***/
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#top-menu li a:hover {
opacity: 1 !important;
}
#top-menu li a:hover:before {
right: 0;
}
#top-menu li li a:before {
bottom: 10%;
}

The page I need help with: [log in to see the link]