Use JavaScript to Click on a Pseudo-Element

Only detect click event on pseudo-element

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.

Use javascript to click on a pseudo-element?

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;
}

Detect if element clicked is a pseudo element

Since you can't detect events on pseudo elements you can insert separate elements into the headerDiv and check the target of the click event to accomplish the same objective. (Or only apply events to the new child elements)

Here I created two spans for "add notes" and "button" texts which get appended to the new div. A new css rule for the button span applies the margin and pointer cursor

window.addEventListener('load', () => {
  // sticky profile notes
  const notes = document.querySelector('#textarea-notes'); // Get textarea element
  const headerDiv = document.createElement("div"); // Create a <div> element
  headerDiv.id = 'div-header';
  
  // Create two spans to insert in headerDiv
  const notesTitle = document.createElement('span')
  notesTitle.innerHTML = 'Add Notes'; // Insert instructions
  // this span could also be a real <button>
  const notesBtn = document.createElement('span');
  notesBtn.textContent = 'button';
  notesBtn.className = 'notes-btn'
  
  headerDiv.append(notesTitle)
  headerDiv.append(notesBtn)

  // add header on top 
  notes.parentNode.insertBefore(headerDiv, notes);
  // minimize sticky
  headerDiv.addEventListener('click', e => {
     let msg = 'Parent clicked';
     if(e.target.matches('.notes-btn')){
        msg = 'Button clicked';
     }
     console.log(msg)
  });
});

#div-header {
  padding: 10px;
  cursor: move;
  background-color: #ffffcc;
}

/*#div-header:after {
  margin-left: 10px;
  cursor: pointer;
  content: 'button';
}*/

#div-header .notes-btn{
  margin-left: 10px;
  cursor: pointer;
}

#textarea-notes {
  background-color: #ffffcc;
  width: 100%;
}

<textarea id="textarea-notes">
    </textarea>

jQuery click on psuedo after element

Your issue is that you're using e.target with a nested label and checkbox.

<span>
    <input ...
    <label ...
</span>

using $("span").click... will receive the events for child elements, with e.target as the element that was clicked, but with this as the element the event was assigned to.

As the psuedo "element" is off the end of the span the calculations for width against the input and label are incorrect.

Changing

if (e.offsetX > $(e.target).width()) {

if (e.offsetX > $(this).width()) {

will use the spans width for the check.

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

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

jQuery how to click a pseudo class element :after

I was confronted with this same issue a few days ago, and I came here to search for an answer, which I found with no problem. I had to put the pseudo-element in span tags in order to get a reference to it with javascript.

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

You could also pass the content to the pseudo element with a data attribute and then use jQuery to manipulate that:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).attr('data-content','bar');
});

In CSS:

span:after {
    content: attr(data-content) ' any other text you may want';
}

If you want to prevent the 'other text' from showing up, you could combine this with seucolega's solution like this: