Only detect click event on pseudo-element

Question

My code is:

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

p:before {
    content: \'\';
    position: absolute;
    left:100%;
    width: 10px;
         


        

Answer 1

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

tag, apply styles to p span instead of p:before, and bind to it.