How change css property using jquery

Question

I am simply showing triangle on top of a div as shown in this example: http://jsfiddle.net/yuvaraj_b/wPWDm/19/ .

I want a triangle for MENU FOUR to show on right side rather than left.

This is not working:

$(this).find(".dropdown ul li:first-child > a:after").css( "left", "300px" );

How can I fix this so that it detect this class and change the postion of left .

Answer 1

Psuedo-elements such as :after do not exist in the DOM and therefore cannot be targeted by jQuery selector strings.

Usually you can accomplish the same thing by using CSS classes and the addClass and removeClass (or toggleClass if you plan on switching it back later in the code execution) jQuery methods - this will allow you to dynamically change the CSS that creates the psuedo-element. So, instead of directly manipulating the CSS of the psuedo element through jQuery, instead write a CSS class for your a element that has the updated CSS for the a:after psuedo element and toggle that class when the triangle needs to be moved.

Answer 2

Add a class of the parent element instead, and assign static CSS styles based on that new class. :after cannot be targeted by JavaScript directly.

$(this).find(".dropdown ul li:first-child > a").addClass('moved');

CSS:

.dropdown ul li a.moved:after {
    left: 300px;
}