Question

我正在使用：before和：after来模拟箭头。代码上的：after很好，但是添加：before则没有，它甚至不会显示在chrome DevTools的elements部分。

我确保添加了内容。还尝试添加宽度，高度，display：block，z-index只是为了测试它是否会出现。

网站：https://dev.radiusbridge.com/dis0319/ 这些代码是指网站移动版本上的第二级菜单项。（991px及以下）

这是效果很好的：after代码

ul#menu-main-navigation > li > .sub-menu > li > .sub-menu > li > a.nav-link:after {
    display: block;
    content: "";
    height: 1px;
    background: #CDDC3C;
    width: 20px;
    position: absolute;
    right: -20px;
    top: 15px;
    transition: all 0.2s ease-in-out;
}

这是无效的：before代码

ul#menu-main-navigation > li > .sub-menu > li > .sub-menu > li > a.nav-link:before {
    content: "\f105";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    color: #CDDC3C;
    font-size: 13px;
    position: absolute;
    right: -23px;
    top: 5.45px;
    transition: all 0.2s ease-in-out;
}

我希望：before代码像：after之后一样工作。

PS：DevTools（检查元素）上没有显示before元素

Answer 1

您的CSS包含以下规则：

ul.sub-menu > li > a:before {
    display: none!important;
}

选择器匹配元素，并且!important表示优先。 DevTools具有令人讨厌的行为，就是根本不显示未显示的伪元素。

要么调整该规则，要么将display: block!important添加到您的“箭头”规则中。

CSS：before在某些元素上不起作用，：after效果很好

1 个答案: