我正在為所有串列項制作懸停效果，以便從中心出現下劃線，我之前也做過類似的事情，但是有一些問題因為它沒有發生。我附上了 HTML 和 css，有人可以幫我找出問題所在嗎？
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
align-items: center;
justify-content: space-around;
height: 10vh;
font-family: 'Josefin Sans', sans-serif;
}
.logo {
font-family: 'Abril Fatface', cursive;
font-size: 2rem;
}
.logo a {
text-decoration: none;
color: #000;
}
.nav-links {
display: flex;
width: 40%;
justify-content: space-around;
}
.nav-links li a {
text-decoration: none;
}
.nav-links li {
list-style: none;
font-size: 25px;
}
.nav-links li a::after {
content: '';
display: block;
height: 2px;
color: #1ebbd7;
margin: auto;
display: none;
transition: 0.5s;
}
.nav-links li a:hover::after {
width: 80%;
}<!--NAVBAR-->
<nav>
<div class="logo">
<a href="index.html">
<h1>The Bakery.</h1>
</a>
</div>
<ul class="nav-links">
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Order</a>
</li>
<Li>
<a href="#">Recipes</a>
</Li>
</ul>
</nav>uj5u.com熱心網友回復：
您同時擁有 display:none 和 display:block on :after。這是為什么 ？你只需要display:block. 顯示無/塊
其次，您添加color:on:after而不是background-color:. 請檢查顏色和背景/背景顏色之間的區別
第三，您需要在 after 上指定初始寬度。例如width:0%
檢查下面的代碼
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
align-items: center;
justify-content: space-around;
height: 10vh;
font-family: 'Josefin Sans', sans-serif;
}
.logo {
font-family: 'Abril Fatface', cursive;
font-size: 2rem;
}
.logo a {
text-decoration: none;
color: #000;
}
.nav-links {
display: flex;
width: 40%;
justify-content: space-around;
}
.nav-links li a {
text-decoration: none;
}
.nav-links li {
list-style: none;
font-size: 25px;
}
.nav-links li a::after {
content: '';
display: block;
height: 2px;
background-color: #1ebbd7;
margin: auto;
width:0%;
transition: 0.5s;
}
.nav-links li a:hover::after {
width: 80%;
} <nav>
<div class="logo"><a href="index.html">
<h1>The Bakery.</h1>
</a></div>
<ul class="nav-links">
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Order</a>
</li>
<Li>
<a href="#">Recipes</a>
</Li>
</ul>
</nav>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/419789.html
標籤：