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; 

它需要的寬度和高度屬性，以及定位信息。因爲下劃線的位置是絕對的，所以我們需要將父元素設置爲相對的（以便相對於父元素絕對定位）。因此，在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>