无法在伪元素工作之前使用

Question

我无法在下拉菜单中使用::before伪元素。

body.currency-gbp span.currency-symbol:before {
    content: "hi";
    width: 10px;
    height: 4px;
    background: red;
}

然而，当我使用::after伪元素

时，它工作正常

body.currency-gbp span.currency-symbol:after {
    content: "hi";
    width: 10px;
    height: 4px;
    background: red;
}

这是基本的HTML

<li class="level2 first"><a href="www.example.com"><span style="
">Under <span class="currency-symbol">50</span></span></a></li>

知道为什么会这样吗？

Answer 1

问题看起来像其他一些CSS是冲突的。您可以通过以下方式检查Chrome的 F12 开发人员工具中的元素的CSS历史记录来完成CSS继承：

这就是样式的应用方式：