Question

因此，我尝试构建导航栏，但似乎有些卡住。我一直在尝试在导航栏下方获得一条大约3-5px粗的黄线。

我记得我过去做过一个导航栏，看起来很像我要尝试的操作，但是我忘记了如何操作，因此丢失了该文档。

所以我用过：nav :: after并尝试了border-bottom，但是它什么也没做。

nav {
    background:black;
    margin:0;
    width:100%;
    padding: 20px;
    display: block;
}
nav::after {
    border-bottom: 8px solid green;
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    bottom: 0;
    margin: 0 auto;
}
nav ul .nav-links {
    float:right;
    margin-top:20px;
    margin-right:40px;
}
nav ul {
    list-style-type:none;
}
nav li {
    display: inline-block;
    color:white;
    margin-right:30px;

}
nav a {
    color:white;
    text-decoration:none;
    float:right;
    transition:.2s ease-in-out;
    font-weight:700;
}
nav a:hover {
    color:#FFE600;
}
.nav-title {
    line-height:30px;
}

<nav id="nav">
    <ul>
        <li class="nav-title"><h2>text text</h2><h4>is a text, text text text</h4></li>
        <div class="nav-links">
            <li><a href="#about">About</a></li>
            <li><a href="#Statistics">Statistics</a></li>
            <li><a href="#what">What can you do?</a></li>
        </div>
    </ul>
</nav>

Answer 1

#nav{
    position: relative;
}

您需要使用“＃” css选择器来指定，您使用id => nav来引用元素。（看起来更干净）

相对位置表示，子元素将相对于父元素绝对定位。（已设置此属性）

Answer 2

您不需要':: after'-您可以删除它。 div的边框底部将自动显示在div的底部。

导航栏下带有:: after的实线

2 个答案: