Use javascript to click on a pseudo-element?

Question

I'm wondering how to enable the clicking on a :before pseudo-element (the orange part of the div on the JSfiddle I link to below). I've read that since pseudo-elements aren't in the DOM you would need a hack for this. Unfortunately, I can't find an existing Stackoverflow Q&A that actually shows working code.

Link: http://jsfiddle.net/Vv6Eb/4/

HTML:

<div></div>

CSS:

div { position:relative; background-color:#333;
      padding:20px; margin:20px; float:left; 
}

div:before { content:""; display:block; 
    padding:5px; background-color:#f60; border:2px solid white; 
    position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px; 
}

Answer 1

If you know where the circle "should" be, you can use trigonometry to see if the click is within the circle: http://jsfiddle.net/Vv6Eb/19/

$("div").click(function(e){
    var $me = $(this),
        width = $me.outerWidth(),
        height = $me.outerHeight(),
        top = $me.position().top,
        left = $me.position().left;

    var len = Math.sqrt(Math.pow(width - e.offsetX, 2) + Math.pow(e.offsetY, 2));

    if (len < 10)
        alert('ding');
});​

Answer 2

A workaround for this would be to dynamically append a <span> to the item and assigning a click method to it. Like this fiddle.

var item = $('<span />');
item.click(function() { alert('click'); });
$('div').append(item);

CSS

div { position:relative; background-color:#333;
      padding:20px; margin:20px; float:left;
}

div span { content:""; display:block;
    padding:5px; background-color:#f60; border:2px solid white;
    position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px;
}