CSS下划线动画不起作用

Question

我正在尝试在CSS中制作带有变换的动画。 当我将鼠标悬停在链接上时，我试图获得下划线动画。 在另一个html文件中，我有类似的代码，它可以工作； 但由于某种原因，它在这里不起作用。 当我将鼠标悬停在链接上时，它们将更改为指定的白色，但不显示转换。 我提供了导航栏HTML和相关的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

因此，您需要添加几行CSS来完成此操作。 到您的.link:before选择器：

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

它需要一个width和height属性，以及定位信息。 由于下划线的位置是绝对的，因此我们需要将父元素设置为相对（以便相对于父元素绝对定位）。 因此，我们在li选择器中添加：

position: relative;

这是工作代码：

 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>