Using `.css` for pseudo-elements

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?

@Randomblue: How is "You can't use jQuery to modify pseudo-elements" not an answer? — BoltClock, Oct 11 '11 at 20:10
@Sotiris: I'm not interested in manipulating the CSS *element* itself, just changing a CSS *property*. — Randomblue, Oct 11 '11 at 20:11
@BoltClock: I was looking for a positive answer. Maybe there is a workaround using raw JavaScript, or a pluggin, or something else — Randomblue, Oct 11 '11 at 20:12
@Randomblue: A negative answer is still an answer. In any case, sorry to disappoint. — BoltClock, Oct 11 '11 at 20:14

score 8 · Accepted Answer · answered Oct 11 '11 at 20:10

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?

The reason I want this is to have an overlay on a specific element, with that specific element changing over time. Please see [this](http://stackoverflow.com/questions/7731523/doing-overlays-without-an-empty-div) question. — Randomblue, Oct 11 '11 at 20:14

score 2 · Answer 2 · answered Oct 11 '11 at 20:09

2

You can do this:

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

answered Oct 11 '11 at 20:09

Tarcísio Júnior

1,239
7
15

Yuck! No inline `style` please. – Randomblue Oct 11 '11 at 20:10
1

@Randomblue: inline stylesheet =/= inline style. – Blazemonger Oct 11 '11 at 20:16

Using `.css` for pseudo-elements

2 Answers2

Linked