Modify css style for pseudo element :after content with Jquery

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

csuwldcat · Answer 1 · 2013-07-09T03:03:04.847

43

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

edited Jul 09 '13 at 03:03

answered Aug 09 '12 at 19:57

csuwldcat

8,021
2
37
32

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. – Tim Post Aug 10 '12 at 05:38
2

Anyone know the browser support of this method? – Gavin May 07 '14 at 21:16
@csuwldcat 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. – Jim22150 Aug 18 '14 at 19:13
2

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. – andreszs Dec 21 '14 at 01:36
brilliant, this was exactly what I was searching for (and it's difficult to find this knowledge!) – Gershom Maes Mar 07 '15 at 23:05
2

As @Andrew mentioned, I don't see how this changes the "left" attribute on the :after pseudo-element. Isn't that what was asked? – Garconis Feb 23 '16 at 15:04
Brilliant solution. – Neurotransmitter Feb 03 '17 at 11:05

score 29 · Answer 2 · answered Oct 25 '11 at 02:59

29

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/

answered Oct 25 '11 at 02:59

methodofaction

70,885
21
151
164

1

Still quite hack-ish, but certainly the most versatile solution. Thanks! – Daniel Feb 11 '13 at 11:42
1

Unfortunately, this is still the way to go 2 years after – Benjamin Intal Aug 19 '13 at 04:38

score 21 · Answer 3 · edited May 23 '17 at 11:54

21

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/

edited May 23 '17 at 11:54

Community

1
1

answered Oct 24 '11 at 22:00

nrabinowitz

55,314
10
149
165

1

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 – Shara Oct 24 '11 at 22:11
@Shara - do you really need it to be pixel-perfect? Or could you make 10 classes and have jQuery choose between them? – nrabinowitz Oct 24 '11 at 22:19
yes, i need pixel-perfect. I prefer double div, but maybe here is brilliant solution.. – Shara Oct 24 '11 at 22:22
@nrabinowitz, no, not in my situation. Here is my solution http://jsfiddle.net/EUHAv/3/ – Shara Oct 24 '11 at 22:36
@Shara checkout the new answer I added, it should make all this waaay less complicated ;) – csuwldcat Aug 10 '12 at 16:13

Modify css style for pseudo element :after content with Jquery

3 Answers3

Linked

Related