Use pseudo-elements like :after with $(this)

Question

For example, I have this jQuery function:

function example(){

  var trigger = $('.image');

  trigger.each(function(e){
    // here I want to change the background color of the :after pseudo-element
    $(this:after).css('background-color', 'red');
    // ^ the above obviously doesn't work
  });

}

How can I add, change or remove CSS attributes to a pseudo-element of $(this)?

Jason, It is not a duplicate. The duplicate just asks to change the content of the pseudo-element. I want to change the CSS attributes — Maarten Wolfsen, Oct 21 '16 at 12:56
Toggle a class instead and use relevant CSS rule to handle pseudo element, e.g `$(this).addClass('red');` and in CSS `.image.red:after {background-color: red;}` — A. Wolff, Oct 21 '16 at 13:14

score 0 · Answer 1 · answered Oct 21 '16 at 12:56

0

You can't handle the ":after" pseudo-element because it doesn't exists in the DOM (same for :before). But you can create it using this:

$(element).after();

And then handle that with JS.

Hope it works for you!

answered Oct 21 '16 at 12:56

Jimmy Adaro

1,325
15
26

How do I handle it? :p – Maarten Wolfsen Oct 21 '16 at 12:58
@MaartenWolfsen Try to store it in a var and do something with that variable. – Jimmy Adaro Oct 21 '16 at 12:59

Use pseudo-elements like :after with $(this)

1 Answers1