Modify css style for pseudo element :after content with Jquery [duplicate]

Question

I have baloon shape designed with CSS3.
JS Fiddle Example It's have triangle made with

:after {     content: ""; } 

I need to moving triangle left-right with modify left css param with Jquery. I know that i can't select pseudo element which out of DOM, but is there another way to change :after style with js?

Yes, we can put another div inside like

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

but it's ugly

Answer 1

There is a much easier way: just set the pseudo element's content property value to attr(some-attribute-name), it will use the value of the HTML attribute on the parent as the content for the pseudo element. You can then use the setAttribute() method on the parent element to change the value dynamically. Below are mock snippets of how this method would look in action. I also did a blog post with further details that contains a live example fiddle.

CSS

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

HTML

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

JavaScript (to change pseudo content)

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

Answer 2

You insert the CSS styles dynamically in the head, and then modify that:

$("<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/