Why isn't my clearfix working in Firefox?

As mentioned in the comments, Firefox is overriding the rule because .sub-menu:after li

your selector is not valid. In CSS2.1 and Selectors 3 , only one pseudo-element can map at most to a complex selector and must be at the very end of the selector. If an invalid selector is found in a rule set, the browser must delete the entire rule set . This is why it doesn't show up in the inspector.

To fix this, either remove the offending selector as it seems like a bug:

.clearfix:after,
.sub-menu:after {
    content: "";
    display: table;
    clear: both;
}

      

        
        
        
      

    

Or, if you want to apply a pseudo-element :after

to .sub-menu li

, move the pseudo-element like this:

.clearfix:after,
.sub-menu:after,
.sub-menu li:after {
    content: "";
    display: table;
    clear: both;
}

      

        
        
        
      

    

So, instead of asking why this CSS isn't working in Firefox, the real question is, why is Chrome accepting it? This is most likely due to the fact that WebKit (and with the Blink extension) is known to be softer when it comes to pseudo-element parsing, possibly due to the fact that it uses some non-standard functionality that requires active violation of the specification. To quote this other answer :

Perhaps the root of the problem is when you are trying to add the generated content to other pseudo-elements that seem to work again in WebKit browsers for some weird reason. Unlike the problem with generated content in replaced elements described above, the current Selectors 3 specs and the upcoming Selectors 4 specs are very clear: you shouldn't have more than one pseudo-element for a complex selector. Of course, WebKit is bogged down in different rules when it comes to implementing pseudo-elements, so in retrospect it doesn't surprise me that WebKit messed that up.

Anyway, the real takeaway is that the implementation of CSS generated content is extremely bad outside of the current CSS2.1 + Selectors standard, by which I mean generated content for replaced elements like input

and progress

and pseudo-elements nesting in a single selector.