Target css:after via Jquery?

Question

Is it possible to target a css classname:after via jquery to alter a style dynamically?

I have a css arrow in a slider - i'd like to change color based on percentage complete - at the moment I have -

 $('.red-bar:after').css("background-color", "#1da9f5");

Which doesnt work! any ideas?

It will not work as jQuery is not handling `:before` and `:after`. Psuedo-elements aren't part of the DOM so jQuery is unable to search for them. — Morpheus, Mar 08 '13 at 10:59
There are already loads of these questions of StackOverflow. — ᴍᴀᴛᴛ ʙᴀᴋᴇʀ, Mar 08 '13 at 11:00

score 2 · Answer 1 · answered Mar 08 '13 at 11:05

You'll want to use the .next() function:

$('.red-bar').next().css("background-color", "#1da9f5");

More info: .next() gets the next sibling of the selected item. If you want to add new content after the selected item, use .after().

Example:

<div id="my_id"></div>
<div id="ignore_me></div>

Now, if you call: $("#my_id").next().html("Hello");, you'll get:

<div id="my_id"></div>
<div id="ignore_me>Hello</div>

But if you call $("#my_id").after("Hello");, you'll get:

<div id="my_id"></div>
Hello
<div id="ignore_me></div>

1 Answers1