Is the pseudo element considered the key selector in this scenario?
Essentially, the subject of the selector is *, indicating that whichever element is matched by * will be responsible for generating the pseudo-element.
The term "key selector" lacks a clear definition when it comes to pseudo-elements, and unlike subject selectors, it's more of an implementation detail. If we were to interpret "key selector" as the "selector representing the box that is rendered," then we could argue that the pseudo-element serves as the key selector. However, without delving into implementation specifics, I refrain from making definitive statements since I am not involved in the implementation process.
In any case, it is reasonable to assume that the browser traverses the DOM and follows these steps for each selected element:
Firstly, attempt to match the element against the selector, disregarding the pseudo-element at this stage (in this instance, *).
If the element matches the selector, try to create a pseudo-element box as a child of this element's box (applicable to generated pseudo-elements like :before and :after) if relevant (certain elements cannot generate pseudo-elements).
Apply styles to the pseudo-element box and render it similarly to other boxes.
The distinction between your two selectors lies in one containing a pseudo-element while the other does not. Since they serve different functions, comparing their performance may not be entirely fair. Nevertheless, both attempt to match any element in the DOM as they share the same catch-all selector *. Hence, barring specific optimizations, the additional overhead with *:after likely stems from generating and rendering the pseudo-element.
Regarding performance considerations, remember that matching an element to * is nearly instantaneous due to its guaranteed match. The real scalability concerns arise when combining it with complex selectors, but even then, the performance impact primarily hinges on the number of elements in the DOM rather than the actual styling rendering—unless dealing with thousands of elements.
In terms of your particular scenario, I would suggest refraining from creating pseudo-elements for every single element. When utilizing CSS for design purposes, aim to narrow down your selector by context to avoid unnecessary box rendering throughout the entire DOM. For instance, if you are exclusively designing within an element identified by a specific ID:
#mycanvas *:after,
#mycanvas *:before {
content:'';
}