CSS嵌套列表中背景色与边框共存问题求助

问题描述 #

我现在有一个带边框的嵌套列表，但是当我给列表项添加背景色后，原本的边框就被背景色盖住了，看起来像是“消失”了。有没有小伙伴能帮我解决这个问题呀？

我当前的CSS代码如下：

.menu-level-0 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: normal;
    border: 1px solid #000;
}

.menu-level-0 li {
    line-height: 2em;
    position: relative;
    line-height: 140%;
    /*background-color: #f0f2f1;*/
}

.menu-level-0 li ul {
    list-style-type: none;
    padding-left: 1em;
    font-size: 12px;
}

.menu-level-0 li:after {
    content:"\00A0";
    position: absolute;
    width: 200%;
    left: -100%;
    top: 0;
    border-top: 1px solid black;
    z-index: -1;
}

这段代码原本运行正常，但一旦取消注释background-color: #f0f2f1;，那些通过:after伪元素实现的边框就被背景色完全挡住了，根本看不到。

问题原因 #

问题出在层级关系上：你给<li>设置了不透明的背景色，同时把边框伪元素的z-index设为-1，这意味着伪元素的层级比<li>本身还低，自然会被<li>的背景色盖住。

解决方案 #

我们可以调整伪元素的层级和背景色的实现方式，让边框能显示在背景色上方。这里提供两种可行的方案：

方案一：直接调整伪元素的z-index

这个方案最简单，只需要修改边框伪元素的层级，让它能“钻”到背景色上方：

.menu-level-0 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: normal;
    border: 1px solid #000;
}

.menu-level-0 li {
    line-height: 140%;
    position: relative;
    background-color: #f0f2f1;
    /* 给li设置基础层级，确保伪元素层级能正确生效 */
    z-index: 0;
}

.menu-level-0 li ul {
    list-style-type: none;
    padding-left: 1em;
    font-size: 12px;
}

.menu-level-0 li:after {
    content:"\00A0";
    position: absolute;
    width: 200%;
    left: -100%;
    top: 0;
    border-top: 1px solid black;
    /* 把边框伪元素的层级设为1，高于li的背景色 */
    z-index: 1;
}

方案二：用伪元素实现背景色（更稳妥）

如果担心后续样式出现层级冲突，可以把<li>的背景色也用伪元素实现，这样能精准控制各元素的层级顺序：

.menu-level-0 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: normal;
    border: 1px solid #000;
}

.menu-level-0 li {
    line-height: 140%;
    position: relative;
    /* 移除li本身的背景色 */
    z-index: 0;
}

/* 新增:before伪元素实现背景色，放在最底层 */
.menu-level-0 li:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f0f2f1;
    z-index: -1;
}

.menu-level-0 li ul {
    list-style-type: none;
    padding-left: 1em;
    font-size: 12px;
}

.menu-level-0 li:after {
    content:"\00A0";
    position: absolute;
    width: 200%;
    left: -100%;
    top: 0;
    border-top: 1px solid black;
    /* 边框伪元素层级高于背景，低于文字内容 */
    z-index: 1;
}

这个方案里，背景色伪元素在最底层，边框伪元素在中间，<li>的文字内容在最上层，三者互不遮挡，效果更稳定。

试试这两个方案，应该就能解决你的边框被背景色盖住的问题啦！

备注：内容来源于stack exchange，提问作者Delbonum