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

Soupandfish

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!');

Boogie

I restored this post because it does provide useful information that wasn't present prior, however please do use the 'flag' link under a question (you have sufficient rep for that) when you find duplicates, and let us know which question you feel is best. Then, answer that question. We routinely close and merge posts into one, so answering all of them just breaks that process. Additionally, our community is very sensitive to SPAM, so please make sure that 1 - your answer can stand alone if a link breaks and 2 - you make it clear that you're the author when linking to sites you own. – Sonnysonobuoy

Anyone know the browser support of this method? – Ahithophel

@Boogie thank you for the submission. I was needing to apply 'new' contents on-the-fly with JS created elements. This does the trick, if following element appends/prepends. – Aronoff

I fail to see how to edit the CSS attributes of the :after pseudo-element with this method. You are just changing the psudo-element content, not its CSS style attributes. – Kulda

brilliant, this was exactly what I was searching for (and it's difficult to find this knowledge!) – Jon

As @Andrew mentioned, I don't see how this changes the "left" attribute on the :after pseudo-element. Isn't that what was asked? – Sharice

Brilliant solution. – Thereupon

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/

Simasimah

Still quite hack-ish, but certainly the most versatile solution. Thanks! – Clemenceau

Unfortunately, this is still the way to go 2 years after – Rosario

Answer 3

As per this related question, you can't select the pseudo element. So I'd suggest defining additional CSS classes, and adding classes to the balloon with jQuery. E.g. use a class like this:

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

and apply it like this:

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

Working jsFiddle: http://jsfiddle.net/nrabinowitz/EUHAv/2/

Utrecht

Yes, it's working, but here you set hard position values in css, but i need set any value with JS, because it's changing dynamically – Soupandfish

@Soupandfish - do you really need it to be pixel-perfect? Or could you make 10 classes and have jQuery choose between them? – Utrecht

yes, i need pixel-perfect. I prefer double div, but maybe here is brilliant solution.. – Soupandfish

@nrabinowitz, no, not in my situation. Here is my solution jsfiddle.net/EUHAv/3 – Soupandfish

@Soupandfish checkout the new answer I added, it should make all this waaay less complicated ;) – Boogie