我希望我的活动元素在上面有一条垂直线,我得到了一个提示,在CSS中使用:before:after来生成这条线.然而,我对这两个标签并不太熟悉,我也try 过使用:after,但它似乎不起作用.你能给我一些建议吗?下面是它应该是什么样子的设计示例.

Design Example

.nav-menu{
    background: var(--unnamed-color-ffffff);
    flex: 1;
    justify-content: space-between;
    padding-top: 2.3rem;
    width: 91.5rem;
}

.nav-menu .icon{
    width: 2.0rem;
    height: 2.0rem;
    margin-right: 1.5rem;
}

.nav-menu .nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-menu .nav-list .nav-item{
    display: inline-block;
}

.nav-menu .nav-list .nav-item .nav-link {
    display: inline-block;
    text-decoration: none;
    color: black;
}

.nav-menu .nav-list .nav-item .active {
    color: red;
}

.nav-menu .nav-list .nav-item .active ::after {
    content: '';
    border-left: 0.1rem solid red;
    height: 1.5rem;
    position: absolute;
    left: 50%;
    top: 0;
}
        <nav class="nav-menu d-flex" id="nav-menu">
            <ul class="nav-list">
                <li class="nav-item">
                    <a href="#home" class="nav-link  active">one</a>
                </li>
                <li class="nav-item">
                    <a href="#about" class="nav-link">two</a>
                </li>
                <li class="nav-item">
                    <a href="#service" class="nav-link">three</a>
                </li>
                <li class="nav-item">
                    <a href="#promotion" class="nav-link">four</a>
                </li>
                <li class="nav-item">
                    <a href="#customer" class="nav-link">five</a>
                </li>
                <li class="nav-item">
                    <a href="#contact" class="nav-link">six</a>
                </li>
            </ul>

        </nav>

推荐答案

在使用position:absolute的父对象上使用active:beforeposition:relative.下面是一个代码示例:

.nav-menu{
    background: var(--unnamed-color-ffffff);
    flex: 1;
    justify-content: space-between;
    padding-top: 2.3rem;
    width: 91.5rem;
}

.nav-menu .icon{
    width: 2.0rem;
    height: 2.0rem;
    margin-right: 1.5rem;
}

.nav-menu .nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-menu .nav-list .nav-item{
    display: inline-block;
}

.nav-menu .nav-list .nav-item .nav-link {
    display: inline-block;
    text-decoration: none;
    color: black;
}

.nav-menu .nav-list .nav-item .active {
    color: red;
    position: relative;
}

.nav-menu .nav-list .nav-item .active::before {
    content: '';
    border-left: 0.1rem solid red;
    height: 1.5rem;
    position: absolute;
    left: 50%;
    bottom: 100%;
}
<nav class="nav-menu d-flex" id="nav-menu">
            <ul class="nav-list">
                <li class="nav-item">
                    <a href="#home" class="nav-link  active">one</a>
                </li>
                <li class="nav-item">
                    <a href="#about" class="nav-link">two</a>
                </li>
                <li class="nav-item">
                    <a href="#service" class="nav-link">three</a>
                </li>
                <li class="nav-item">
                    <a href="#promotion" class="nav-link">four</a>
                </li>
                <li class="nav-item">
                    <a href="#customer" class="nav-link">five</a>
                </li>
                <li class="nav-item">
                    <a href="#contact" class="nav-link">six</a>
                </li>
            </ul>

        </nav>

Html相关问答推荐

FlexBox 将元素挤压在一起

是否无法在 Bootstrap 5 中更改 的字体系列?

如何使 SVG 笔画显示背景?

表为行应用css

如何将图片附加到另一张图片?

css如何调整元素内容的高度

为什么 ul 不使用完整导航的高度?

为什么 Bootstrap 折叠功能不起作用?

有没有办法将元素固定在具有 object-fit:cover 属性的图像的某个点?

div中的空间太大

为什么border radius = 1时才有效?

CSS网格样式

无法在生产构建中使用 LoadHTMLGlob 加载 html 文件

HTML 锚标记占用整行

使用smoke动画减小ring大小

内容在放大时不适合屏幕,缩小时会留下空白

如何在有边距的容器中获取带有渐变的背景图像?

CSS:在flexbox的第二行插入图标

如何使用 JavaScript/jQuery 滚动到页面顶部?

除固定区域外,整个屏幕变暗?