[css4-ui] pointer-events for pseudo-elements

[laukstein]

Related to planned spec https://wiki.csswg.org/spec/css4-ui#pointer-events

I don't find any well documented spec related to CSS pointer-events, nether regarding its behavior on pseudo-elements :before and :after.

pointer-events is supported on all browsers, except this behaves clickable:

<a href=#test></a>

a:before {
    content: "Link";
    pointer-events: none;
}

testcase https://output.jsbin.com/telawab/quiet

Wouldn't pointer-events be expected to be supported also in pseudo-elements? In this case, means, link mustn't be clickable?

Maybe would be worth to mention anything in spec.

[SebastianZ]

@laukstein Little note: Pseudo-elements have two colons as prefix. For backwards compatibility some of them (like ::before and ::after) need to be accepted by user agents when written with one colon, though.

Sebastian

[upsuper]

It seems to me that nothing is wrong here. If you have the following code:

<a href="#test"><span style="pointer-events: none">link</span></a>

the link is still clickable in browsers.

I'm not familiar with exactly how pointer-events should work, but it seems that the pseudo-element case is consistent with the example above, because ::before and ::after should behave as if they are children of the matched element.

[Loirooriol]

pointer-events: none just means that the element is not the target of mouse events. But the target can be an ancestor, in this case, the a element. So the link is followed.

[laukstein]

The link in this case is clickable

div {
    pointer-events: none;
}
<a href=#test><div>The link is not-clickable</div></a>

what means element events, element that contains pseudo-elements with pointer-events: none, wouldn't be avoided either.

@Loirooriol thanks for answering the question! Closing this task for now. Anyway it would be great to have official spec for CSS pointer-events.

[Nadya678]

pointer-events: none means "transparent for click/touch". It is reason why link is still clickable.
Greater problem is that, the pointer:none elements are still accessible via keyboard. It is not intuitive for me.