jQuery/CSS selecting :before and :after pseudo-elements

Asked Dec 27 '12 at 17:07

Active Dec 27 '12 at 17:07

Viewed 1.7k times

Possible Duplicate:
How do I access style properties of pseudo-elements with jQuery?
Manipulating CSS :before and :after pseudo-elements using jQuery

I'm making an on/off switch and decided to try using the :after pseudo-element for the physical switch. The styling is such that I just need to switch the pseudo element between float right and float left to switch it on and off.

Can I select pseudo-elements in jQuery or plain javascript? I've tried $("#myid:after") and $("#myid::after"), both of which work in the stylesheet but are not working as jQuery selectors.

Or do I have to give in and use an extra div or span? That seems like it would be a pretty big drawback for pseudo elements.

edited May 23 '17 at 11:44

Community

asked Dec 27 '12 at 17:07

danny

10,103
10
50
57

3

Pseudo elements don't exist in the DOM, they can't be selected with JS. Use a `span` or similar. – elclanrs Dec 27 '12 at 17:12
Ahh sorry for the duplicate, thanks – danny Dec 27 '12 at 17:17
3

FWIW a good workaround for my case in particular is to define both `#myid.on:after` and `#myid.off:after` in my stylesheet and then just add/remove the classes "on" and "off" on the switch div. – danny Dec 27 '12 at 18:25
danny do you have any demo? – Kushal Jayswal May 13 '16 at 11:26

jQuery/CSS selecting :before and :after pseudo-elements

0 Answers0