html - Pseudo-element not clickable

Question

I've placed an arrow as an :after pseudo-element of a clickable tile. It creates a blind spot that is not clickable despite setting the height/width to 0.

Code here: http://cdpn.io/vpjCg

To see the issue, roll cursor over the tiled link, then over the character in the bottom-right corner.

Is there a CSS attribute or another solution to set the :after element as invisible to the mouse cursor so that the whole area is clickable?

Answer 1

Pseudo elements belong to their parents - if their parent is clickable (button,a) then so will the pseudo element. Likewise with DOM elements, if a DOM element has a click event listener bound, it will be fired when you click directly on the DOM element, or on it's pseudo elements.

EDIT

In addition to my answer, you can make your clicks go "through" an element to hit underlying elements using the CSS property pointer-events and setting the value to none. Works in every modern browser (IE9 and up) https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events