for (var i = 1; i < 6; i++) {
$('#wpu'+i).hover(function(){$('#epu'+i).toggle();});
}
<div class='item'>
<div class='before'></div>
контент
<div class='after'></div>
</div>content: attr(attr-name) 
div[class^="m"] {
color: red;
}
var maxHeight = Math.max.apply(
null,
$.map($("div"), function(e){
return $(e).height();
})
);
$("div").height(maxHeight);$('.popUp').click(function(e){
if(
e.clientX > $(this).offset().left + $(this).outerWidth()
//Ваш :after находится за пределами .popUp.
//При клике смотрим текущие координаты мыши
//Если она за пределами .popUp, то следовательно - клик произошел по псевдоэлементу
){
$('.popUp').addClass('close');
}
});