css 导航栏中没有显示该行？

myzjeezk 于 2022-12-05 发布在其他

关注(0)|答案(1)|浏览(767)

我在YouTube上看了一个教程，其中使用了CSS悬停和after效果，所以当你把光标放在导航栏项目上时，一条线逐渐从中心出现。但是这条线根本不显示，当我把光标放在导航栏项目上时也不显示，当我写:: after代码时也不显示。我不明白是什么问题？
这是CSS代码

nav {
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
    position: sticky;
}

nav img {
    width: 150px;
}

.nav-links {
    flex: 1;
    text-align: right;
}

.nav-links ul li {
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}

.nav-links ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
}

.nav-liks ul li::after {
    content: '';
    width: 100%;
    height: 2px;
    background: #a85d58;
    display: block;
    margin: auto;
    transition: 0.5s;
}

.nav-liks ul li:hover::after {
    width: 100%;
}

这就是Html

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>University</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,700;1,700&display=swap" rel="stylesheet">

</head>

<body>

    <section class="header">
        <nav>
            <a href="index.html"><img src="img/logo.png"></a>
            <div class="nav-links">
                <ul>
                    <li><a href="">HOME</a></li>
                    <li><a href="">ABOUT</a></li>
                    <li><a href="">COURSE</a></li>
                    <li><a href="">BLOG</a></li>
                    <li><a href="">CONTACT</a></li>
                </ul>
            </div>
        </nav>

    </section>

</body>

</html>

css

来源：https://stackoverflow.com/questions/74668638/the-line-isnt-showing-in-the-navbar

1条答案

按热度按时间

lymnna711#

根据您提供的代码，以下行中似乎存在拼写错误：

.nav-liks ul li::after {

.nav-liks类不存在，因此不会应用这行代码。相反，它应该是.nav-links类，如下所示：

.nav-links ul li::after {

这会将：：after伪元素应用于li元素，这些li元素是ul元素的子元素，而ul元素是具有nav-links类的元素的子元素。
我还建议将：：after元素的display属性从block更改为inline-block，这样它就不会占用其父元素的整个宽度，而只会影响应用它的文本的宽度。

.nav-links ul li::after {
    content: '';
    width: 100%;
    height: 2px;
    background: #a85d58;
    display: inline-block;
    margin: auto;
    transition: 0.5s;
}

这个答案是使用OpenAI生成的。我希望它能有所帮助。

赞(0）回复(0）举报 2022-12-05

我来回答

css 导航栏中没有显示该行？

1条答案

相关问题

热门标签

最新问答