Change css style for pseudo element: after content using jQuery

Question

I have a ball shape developed using CSS3.
JS script example. It has a triangle with

:after { content: ""; } 

I need to move the triangle left-right using the left parameter of css param with jQuery. I know that I cannot select a pseudo-element which is from the DOM, but is there any other way to change: after the style with js?

Yes, we can put another div inside, like

 <div class="pop"><div class="arr"></div></div> 

but it is ugly

Answer 1

There is a much simpler way: just set the value of the content property of the pseudo-element content to attr(some-attribute-name) , it will use the value of the HTML attribute for the parent as the content of the pseudo-element. Then you can use the setAttribute() method on the parent to dynamically change the value. Below are mock fragments of how this method will look in action. I also made a blog post with more details , which contains a live sample script.

CSS

 #SomeElement:after { content: attr(some-attribute-name); } 

HTML

 <div id="SomeElement" some-attribute-name="Pseudo content here!"></div> 

JavaScript (for changing pseudo content)

 var someElement = document.getElementById('SomeElement'); someElement.setAttribute('some-attribute-name', 'New pseudo content here!'); 

Answer 2

You insert CSS styles dynamically into the head, and then change this:

 $("<style type='text/css' id='dynamic' />").appendTo("head"); $('.pop').click(function(e){ $("#dynamic").text(".pop:after{left:" + e.offsetX+ "px;}"); }); 

Here is a demo

http://jsfiddle.net/HWnLd/

Answer 3

According to this related question, you cannot select a pseudo-element. Therefore, I would suggest defining additional CSS classes and adding classes to the balloon using jQuery. For example. use the class as follows:

 .pop.right:after { left: 80%; } 

and apply it as follows:

 $('div.pop').addClass('right'); 

JsFiddle work: http://jsfiddle.net/nrabinowitz/EUHAv/2/