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>