Using `.css` for pseudo-elements [duplicate]

Question

Possible Duplicate:
Manipulating CSS :before and :after pseudo-elements using jQuery

I would like to the jQuery equivalent this CSS code:

p:before {
   content: 'Intro!';
}

I've naively tried $('p:before').css('content', 'Intro!'); but it doesn't work.

How can I do pseudo-element CSS modifications using jQuery?

Answer 1

You can't.

1) The selector, p:before, is not just a selector -- the psuedo element defines functionality that does not affect the actual selection. What is jQuery supposed to return, all p tags? That's all $(...) does -- it returns a bunch of elements that match your selector. jQuery (Sizzle/querySelectorAll) doesn't know how to fetch :before...

2) Psuedo-element/class behaviour is not available via JS APIs either.

The only way to do something like this, dynamically via JS, would be to create a <style> element, like so:

$('<style>p:before{content:"intro";}</style>').appendTo('head');

May I ask why you want to do this in the first place?

Answer 2

You can do this:

$(document).append($("<style>p:before{ content: 'Intro!' } </style>"));