CSS:before 不适用于某些元素，:after 工作正常

Question

我正在使用 :before 和 :after 来模拟箭头。代码上的 :after 很好，但是添加 :before 没有，它甚至没有出现在 chrome DevTools 的元素部分。

我确保添加了内容。还尝试添加宽度、高度、display:block、z-index 以测试它是否会显示。

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

这是运行良好的 :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 上（Inspect Element）

Answer 1

您的 CSS 包含以下规则：

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

选择器匹配元素，!important表示优先。 DevTools 有一个烦人的行为，就是不显示未显示的伪元素。

调整该规则或将 display: block!important 添加到您的 "arrow" 规则。

CSS:before 不适用于某些元素，:after 工作正常

CSS:before is not working on some elements, :after works just fine

html

css

css-selectors

pseudo-element