I'm encountering an issue while attempting to create a hover animation for an <a> tag with an underline effect, similar to the example showcased on this particular webpage. Even though the tutorial is readily available, my implementation seems to be failing without clear reasons.
Below is the snippet from my CSS file:
#about-text-box a {
text-decoration: none;
font-size: 17pt;
font-family: 'Silkscreen', cursive;
color: #ECE0E7;
text-align: center;
width: 95%;
text-shadow: 2px 2px 2px #101400;
transition: 0.5s;
}
#about-text-box a:hover::after, #about-text-box a:focus::after {
opacity: 1;
transform: translate3d(0, 0.2em, 0);
}
#about-text-box a::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.1em;
background-color: inherit;
opacity: 0;
transition: opacity 300ms, transform 300ms;;
}