胡佛后下划线动画

Question

动画不工作的原因(我使用normalize不知道它是否有一个效果+默认的开始)我复制了代码，但它不适合我它的第二个项目，我只是一个真正的初学者，所以欢迎任何建议
提前感谢^^

*/ html */
<nav>
<a href="./index.html"
><img src="./eduford_img/logo.png" alt="Uni logo"
/></a>
<div class="nav-links">
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./about.html">About</a></li>
<li><a href="./course.html">Course</a></li>
<li><a href="./blog.html">Blog</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</div>
</nav>
*/ css */
nav {
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav img {
width: 150px;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
display: inline-block;
position: relative;
padding: 8px 12px;
}
.nav-links ul li a {
color: #fff;
font-size: 16px;
text-decoration: none;
}
.nav-links ul li a ::after {
content: "";
width: 0%;
height: 2px;
background: var(--primary-400);
display: block;
margin: auto;
transition: var(--transition);
}
.nav-links ul li:hover::after {
width: 100%;
}

Answer 1

由于您将::after放在<a>元素上，因此您需要.nav-links ul li:hover a::after，而不是.nav-links ul li:hover::after:

*/ html */
<nav>
<a href="./index.html"
><img src="./eduford_img/logo.png" alt="Uni logo"
/></a>
<div class="nav-links">
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./about.html">About</a></li>
<li><a href="./course.html">Course</a></li>
<li><a href="./blog.html">Blog</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</div>
</nav>
*/ css */
nav {
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav img {
width: 150px;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
display: inline-block;
position: relative;
padding: 8px 12px;
}
.nav-links ul li a {
color: #fff;
font-size: 16px;
text-decoration: none;
}
.nav-links ul li a::after {
content: "";
width: 0%;
height: 2px;
background: var(--primary-400);
display: block;
margin: auto;
transition: var(--transition);
}
.nav-links ul li:hover a::after {
width: 100%;
}

一个经过一些修改的例子，使它在这个网站上工作:

body {
background: black
}
nav {
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav img {
width: 150px;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
display: inline-block;
position: relative;
padding: 8px 12px;
}
.nav-links ul li a {
color: #fff;
font-size: 16px;
text-decoration: none;
}
.nav-links ul li a::after {
content: "";
width: 0%;
height: 2px;
background: red;
display: block;
margin: auto;
transition: width 0.5s;
}
.nav-links ul li:hover a::after {
width: 100%;
}
```

<nav>
<a href="./index.html"
><img src="./eduford_img/logo.png" alt="Uni logo"
/></a>
<div class="nav-links">
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./about.html">About</a></li>
<li><a href="./course.html">Course</a></li>
<li><a href="./blog.html">Blog</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</div>
</nav>