Randomblue Randomblue - 1 month ago 26
CSS Question

Only detect click event on pseudo-element

My code is:

p {
position: relative;
background-color: blue;
}

p:before {
content: '';
position: absolute;
left:100%;
width: 10px;
height: 100%;
background-color: red;
}


Please see this fiddle: http://jsfiddle.net/ZWw3Z/5/

I would like to trigger a click event only on the pseudo-element (the red bit). That is, I don't want the click event to be triggered on the blue bit.

Answer

This is not possible; pseudo-elements are not part of the DOM at all so you can't bind any events directly to them, you can only bind to their parent elements.

If you must have a click handler on the red region only, you have to make a child element, like a span, place it right after the opening <p> tag, apply styles to p span instead of p:before, and bind to it.