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>