这里的简单问题我想不通(可能解决方案非常简单，我只是看不到它)。如果将鼠标悬停在 a 元素上，:before 样式会占据页面末尾的宽度。
这是为什么呢？是否有任何解决方案可以使其仅从 li 元素继承宽度(使其始终与导航链接一样宽)？
/* navbar style */
#sidebar-wrapper {
}
.navbar {
padding: 0px;
}
.navbar li:before {
content: '';
position: absolute;
top: 0px;
height: 3px;
width: 100%;
background-color: #aaa;
transition: 0.2s ease;
z-index: -1;
}
.navbar li:hover:before {
height: 100%;
}
.navbar li:first-child:before {
background-color: #ec1b5a
}
.navbar li:nth-child(2):before {
background-color: #3DEC1B
}
.navbar li:nth-child(3):before {
background-color: #D3EC1A
}
.navbar li:nth-child(4):before {
background-color: #1B9AEC
}<head>
<meta charset="utf-8">
<title>Matt Chowski's portfolio</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/popper.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<nav class="nav justify-content-between" id="sidebar">
<ul class="nav">
<li class="navbar-brand"><a class="nav-link">Mateusz Wojciechowski</a></li>
</ul>
<ul class="nav navbar" id="navlinks">
<li><a class="nav-link active" href="#">Home</a></li>
<li><a class="nav-link" href="#">About</a></li>
<li><a class="nav-link" href="#">Gallery</a></li>
<li><a class="nav-link" href="#">Contact</a></li>
</ul>
</nav>
</div>
</body>谢谢大家的帮助<3
最佳答案
检查这段代码。
我所做的只是将 position: relative; 添加到 li 并将 display: flex 添加到 ul
https://codepen.io/Izulito/pen/xXmOqq
关于html - CSS :before width，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46798331/