::first-letter pseudo-element not working in firefox

Question

I cannot for the life of me figure this one out. I just want to style the dollar sign to be a different color and I would like to avoid using another element around the dol

Answer 1

It seems to be due to the $ character not being interpreted as a letter character by Firefox, based on the discovery that replacing the $ with a letter character (A, B, C...) causes the demo to work:

    
David Wilcox 
A$5,849,48784
    
David Cowee 
B$5,498,36401
    
D.J. Johnson 
C$5,098,27635
​

JS Fiddle demo.

Revisiting this question, though, it's worth noting that now you could use CSS generated-content to both supply, and style, a first-character, using ::before:

li div::before {
    content: '$';
    color: red;
}

With the HTML:

    
David Wilcox 
        
5,849,48784
        
    
    

JS Fiddle demo.