CSS :宽度之前

Question

这里的简单问题我想不通（可能解决方案非常简单我只是看不到）。如果将鼠标悬停在 a 元素上，:before 样式会占据页面末尾的宽度。

这是为什么？任何让它仅从 li 元素继承宽度的解决方案（让它始终与导航 link 一样宽）？

/* 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

Answer 1

查看此代码。

我所做的只是将 position: relative; 添加到 li 并将 display: flex 添加到 ul https://codepen.io/Izulito/pen/xXmOqq

CSS :宽度之前

CSS :before width

html

css

css-selectors

pseudo-element