css - CSS Pseudo element jquery click event?

Question

I have an LI element "add folder" that uses a css pseudo before element to add a plus, like so:

the LI has a class of "add" and I have jquery that fires when "add" is clicked and CSS on the LI to show a cursor.

Of course, the pseudo element is not active. I realize that pseudo elements are not part of the DOM, but how would you handle this sort of thing (preferably without resorting to an IMG tag) so the words AND the plus mark can be clicked?

Here is the CSS for the plus:

li.add:before {
    content: "\002B";
    display: inline-block;
    padding: 0 5px;
    margin-right: 5px;
    background: $orangelight;
}

Answer 1

它在这里工作得很好：http: //jsfiddle.net/Un4gq/

$("li").on("click", function () {
    alert("click");
})