Question

I have this CSS

#popup .title:hover:after {
    content: "hide";
    position: absolute;
    top: 3px;
    right: -32px;
    background: orange;
    padding: 2px 4px;
    font-size: 10px;
    border-radius: 4px;
}

and wanted to use a click event on it to .remove() the <div id="#popup"> But:

$('#popup .title:hover:after').length

returns 0 on document ready..

Is there a way to do this?

Answer 1

Is there a way?

Sorry, no. Pseudo-elements created with :after (or :before, or the CSS 3 equivalents ::after and ::before) are not part of the DOM and therefore cannot be selected.

From the CSS 2.1 spec:

Generated content does not alter the document tree. In particular, it
is not fed back to the document language processor (e.g., for
reparsing).