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

【问题标题】：CSS:before is not working on some elements, :after works just fineCSS:before 不适用于某些元素， :after 工作正常
【发布时间】：2019-09-02 09:23:29
【问题描述】：

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

我确保添加了内容。还尝试添加宽度、高度、显示：块、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(Inspect Element) 上没有显示 before 元素

【问题讨论】：

我在你的网站上看到了前后，一个是线，另一个是箭头

标签： html css css-selectors pseudo-element

【解决方案1】：

您的 CSS 包含以下规则：

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

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

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

【讨论】：