Why does :before only seem to work once in my code?

Question

I am using :before to display webfont icons before menu items. For some reason :before is only working on one class and is completely ignoring the other class. If I change both classes on the two li's that should have icons before them to the working class name, the icon shows up.

Ideas?

Here is an example: http://jsfiddle.net/bigdmachine/erxjE/1/

Answer 1

I'd rather update the CSS to;

nav#al-top-menu .log-out a:before, 
nav#al-top-menu .setting a:before {
     content: "X";
     margin-left: 15px;
     margin-right: 5px;    
     font-family: 'WebSymbolsRegular';
     font-size: 14px;
     color: blue;

}

Answer 2

我认为您不能像这样在<ul>内创建“免费”伪元素，列表应仅包含列表项。