Trigger events with JQuery on a CSS3 :after pseudo-element?

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?

well i guess i can create dinamically the element with javascript... but just curious — Toni Michel Caubet
– Toni Michel Caubet, Commented Jan 24, 2012 at 21:43

James Allardice · Accepted Answer · 2012-01-24 21:42:09Z

4

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).

answered Jan 24, 2012 at 21:42

James Allardice

166k22 gold badges335 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jamie Hutber · Accepted Answer · 2012-01-24 22:33:06Z

0

Sadly Pseduo elements aren't in the dom. So your browser won't be able to see them :(

As you want them to load in after the page has loaded or would have read the css i would do it with javascript using the after:

 $('#popup .title').after(); (you'll need to ploop your code in still)

and now that has been added i can play with it with javascript and remove etc etc.

answered Jan 24, 2012 at 22:33

Jamie Hutber

28.2k54 gold badges194 silver badges314 bronze badges

Collectives™ on Stack Overflow

Trigger events with JQuery on a CSS3 :after pseudo-element?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related