It is not feasible.
::after serves as a pseudo-element and thus it is considered part of the element to which it belongs. If ::after is hovered, the element will be hovered as well, regardless of whether it is rendered within the space occupied by its parent or in a completely separate area.
In cases where ::after is positioned outside the parent, you can disable the hover effect on the parent by applying pointer-events:none to ::after, thereby allowing the hover (and all other pointer events) to pass through. However, in your scenario, these events would pass through to the parent.
If there is a specific area within an item that should not trigger a hover effect on the item itself, you would need to cover it with a sibling element of the item placed above it, within a common parent container with position:relative. This sibling element must either follow the hovered element in the DOM hierarchy or have a higher z-index than the hovered element to ensure it is rendered above it.
Here's a demonstration:
body {background-color: #ccc}
relative-parent,
relative-parent * {
display: inline-block;
padding: .3rem;
box-sizing: border-box;
}
relative-parent {
position:relative;
}
hover-element {
width: 10rem;
height:10rem;
background-color: #eee;
transition: all .3s cubic-bezier(.4,0,.2,1);
}
hover-element:hover {
background-color: #f00;
cursor: pointer;
color: #fff;
}
hover-element:after,
hover-mask {
position: absolute;
width: 4rem;
height: 4rem;
border: 1px solid #000;
box-sizing: border-box;
}
hover-element:after {
right: -5.3rem;
bottom: 2rem;
content: '::after'
}
hover-mask {
bottom: 2rem;
right: 2rem;
}
<relative-parent>
<hover-element>hover-element</hover-element>
<hover-mask>sibling</hover-mask>
</relative-parent>