Text underline on hover in text module?

How do I do something like this:

https://stackoverflow.com/questions/54616139/how-to-animate-underline-from-left-to-right/69150401

in a Divi text module?

Everything I keep seeing when I search is for a menu header, which I actually have using this code in the Divi custom CSS section on the theme options page:

#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: #626267; /*** COLOR OF THE LINE ***/
height: 2.5px; /*** 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%;
}

However, I want to be able to do this in regular text modules so when I hover over a specific text on the screen an underline from left to right happens.