CSS :hover:before 没有按预期工作

Question

我一直在使用主题并尝试整理一些内容。

创建者使用:before 和:after 来获得菜单中虚线的效果。问题是当我将鼠标悬停在 li 上时，它显示左侧垂直线正常，但 link 的破折号消失了

这是一个JSBIN

/* horizontal lines that disappear */
.nav-list > li .submenu > li:before,
.nav-list > li .submenu > li > ul > li:before {
    content: "";
    display: block;
    position: absolute;
    width: 9px;
    left: 25px;
    top: 17px;
    border-top: 1px dashed rgba(255,255,255,0.5);
}

.nav-list > li .submenu > li > ul > li:before {
    width: 22px;
}

/* vertical lines the stay */
.nav-list > li .submenu > li:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 22px;
    width: 0;
    border-left: 1px dashed rgba(255,255,255,0.5);
}

Answer 1

悬停时的背景颜色覆盖了虚线。您可以使用 z-index 来解决这个问题。

.nav-list > li .submenu > li:before,
.nav-list > li .submenu > li > ul > li:before {
    z-index: 1;
}

Answer 2

:after伪元素出现是因为它出现在之后DOM中的a元素（因此堆叠在锚元素之上——顺序很重要，因为它们是兄弟元素）。

:before 伪元素没有显示，因为它被出现在它上面的 a 元素的背景重叠了。这是因为 :before 伪元素出现在之前 DOM.

中的 a 元素

解决这个问题，只需要增加:before伪元素的z-index即可（默认为auto）

这样做时，:before 伪元素在悬停在锚元素上时不会重叠，因为 stacking context is established（顺序很重要，因为它们是兄弟姐妹）。

Updated Example

.nav-list > li .submenu > li:before,
.nav-list > li .submenu > li > ul > li:before {
    content: "";
    display: block;
    position: absolute;
    width: 9px;
    left: 25px;
    top: 17px;
    border-top: 1px dashed rgba(255,255,255,0.5);
    z-index: 1;
}

Answer 3

之前的元素正在获取 "covered"、

添加 z-index 就可以了：

/*add it to this block of CSS*/
.nav-list > li .submenu > li:before,
.nav-list > li .submenu > li > ul > li:before {
content: "";
display: block;
position: absolute;
width: 9px;
left: 25px;
top: 17px;
border-top: 1px dashed rgba(255,255,255,0.5);
z-index:111
}

CSS :hover:before 没有按预期工作

CSS :hover:before not working as expected

css

css-selectors

pseudo-element