Is it possible to detect a click of an :after or :before pseudo element with jQuery?

Question

Lets say I have:

<div></div>

with:

div {
    width: 500px;
    height: 500px;
    position: relative;
}
div:after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    right: 0;
}

Can I do something like $('div:after').click(function(){...}); ? And have it not fire if I am clicking on div but not div:after.

Why don't you just split it into another element and save the headache? — Mathew Thompson, Mar 29 '13 at 16:46
@watson The answer (as far as I'm aware) is no, unfortunately. — Mathew Thompson, Mar 29 '13 at 16:48
http://stackoverflow.com/questions/5041494/manipulating-css-before-and-after-pseudo-elements-using-jquery — Ram, Mar 29 '13 at 16:52

score 8 · Accepted Answer · edited May 23 '17 at 11:46

8

Maybe. Depending on how you structure your pseudo content you would have to rely on calculating mouse position for clicks on the actual div. The event handlers would all go on the div, and not the pseudo element because it doesn't exist in the DOM.

See Manipulating CSS :before and :after pseudo-elements using jQuery for some more info. Especially BoltClock's answer.

Also see Felix's comment for another possible solution without mouse position: Only detect click event on pseudo-element

edited May 23 '17 at 11:46

Community

1
1

answered Mar 29 '13 at 16:51

ryan

6,541
5
43
68

3

I can't find any comment from felix. – T J Sep 09 '14 at 07:25

Is it possible to detect a click of an :after or :before pseudo element with jQuery?

1 Answers1