How to detect wether the mouse is over the :before or over the :after part of an element

Question

I have this CSS to define drop areas, where a user can either drop a section before or after existing sections.

.section:before,
.section:after {
    content: "[insert here]";
    height: 64px;
    line-height: 56px;
    width: 100%;
    display: block;
    border: 3px dashed #aaa;
}

Using JavaScript + JQuery here is the drop listener, that detects the element currently under the mouse:

elem.on('drop', function(e) {
  e.preventDefault();

  var container = $(elem[0].elementFromPoint(e.clientX, e.clientY));
});

However container would be the same element for both the :before and :after case.

How will I be able to know if the user has dropped before or after the section?

Answer 1

::before and ::after are css pseudo-elements which javascript do not know about. For javascript, they are both their parent element.

You might want to use real html elements to do that.