Can't get before pseudo element to work

Issue

I can't get the ::before pseudo element to work in a drop down menu.

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

Yet, it works fine when I use the ::after pseudo element

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

This is the basic HTML

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

Any idea why this may be happening?

Solution

The issue looks like some other CSS is conflicting. You can go through the CSS Inheritance by inspecting the element's CSS history in Chrome's F12 developer tools this way:

And this is how the styles get applied:

_{(source: chrome.com)}

Answered By - Praveen Kumar Purushothaman