I'm trying to make the <a> label element animate in underline on hover, similar to the first example on this page. It almost feels stupid to ask this question because the tutorial is there but what I'm doing isn't working and I don't know why.
This is my CSS content
#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;;
}
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I noticed some missing properties:
content: ''is missing. For pseudo-elements, theona::aftercontentattribute can be empty"", but must be specified.position:relativeneeds to be onabecause pseudo-elementa::afterusesposition:relative.a::afteris usingbackground-color:inheritbut there doesn't seem to be any value that can be inherited. I'm currently giving it a value ofhotpink, but this can be customized to any color.cursor:pointeronaso it better matches your desired result.Hope this helps!
Example: (see live demo with buttons below)
#about-text-box { display: flex; } #about-text-box a { display: block; position: relative; padding: 0.2em 0; cursor: pointer; text-decoration: none; font-size: 17pt; font-family: "Silkscreen", cursive; color: #ece0e7; text-align: center; 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 { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 0.1em; background-color: hotpink; opacity: 0; transition: opacity 300ms, transform 300ms; }