Question

My goal: Mousehover a link, have a certain element on the page change the .class:before content to something from the link title.

Therefore:

I want to change the content of a .class:before, namely .test:before.
However,

$("#test:before").css("content","whatever the content should be");

does not do the job. How do I adress :before classes?

Alternatively, I could use .before(); – Yet, I don’t know how to unset .before(); once my mouse is off the link. Might be an alternative solution?

Looked up the jquery documentation – cant find the solution – probably due to my limited jquery knowledge 😉

Help appreciated!

Answer 1

Interesting question.

$(x) is a selector…you’re looking for a particular DOM object. But a CSS pseudo class isn’t a DOM object. It’s just a declaration in the CSS.

I’m not sure you CAN directly manipulate this via jQuery.

What you could do, though, is just apply a new class via jQuery:

$("#test").hover(function(){$(this).addClass('hover')});

Then in your CSS:

#test.hover:before

Which would then over-ride your default #test:before