CSS underline animation is not working

Question

I am trying to do an animation with transform in CSS. I am trying to get an underline animation when I hover over the link. In another html file, I have similar code and it works; but for some reason, here it is not working. When I hover over the links, they change to the specified white color but do not display the transformation. I have provided the navigation bar HTML and the relevant CSS.

 ul { list-style-type: none; } li { display: inline; } li a { color: black; text-decoration: none; } .link:hover { color: white; } .link:before { content: ""; visibility: hidden; transform: scaleX(0); transition: all 0.3s ease-in-out 0s; background-color: #000; } .link:hover:before { visibility: visible; transform: scaleX(1); } 

 <nav> <ul> <li><a class="link" href="home.html">Home</a></li> - <li><a class="link" href="code.html">Code</a></li> - <li><a class="link" href="webpages.html">Webpages</a></li> - <li><a class="link" href="articles.html">Articles</a></li> - <li><a class="link" href="resume.html">Resume</a></li> </ul> </nav> 

Answer 1

So you need to add a few more lines of CSS to accomplish this. To your .link:before selector:

position: absolute;
bottom: 0;
width: 100%;
height: 1px;

It needs a width, and a height property, as well as positioning information. Because the position of the underline is absolute, we need to set the parent element to be relative (so that it is absolutely positioned relative to the parent). Thus to the li selector we add:

position: relative;

Here is the working code:

 ul { list-style-type: none; } li { display: inline; position: relative; } li a { color: black; text-decoration: none; } .link:hover { color: white; } .link:before { position: absolute; bottom: 0; width: 100%; height: 1px; content: ""; visibility: hidden; transform: scaleX(0); transition: all 0.3s ease-in-out 0s; background-color: #000; } .link:hover:before { visibility: visible; transform: scaleX(1); } 

 <nav> <ul> <li><a class="link" href="home.html">Home</a></li> - <li><a class="link" href="code.html">Code</a></li> - <li><a class="link" href="webpages.html">Webpages</a></li> - <li><a class="link" href="articles.html">Articles</a></li> - <li><a class="link" href="resume.html">Resume</a></li> </ul> </nav>