how to add / Remove :after class to div using jQuery

Question

How to can we add/Remove :after class to div using jQuery

let say I have following class

.vignetteC1:after { ... }
.vignetteC2:after { ... }
.vignetteC3:after { ... }
.vignetteC4:after { ... }
.vignetteC5:after { ... }

if we want to add after class to a dive using jQuery how can we do so. ?

I have googled a lot but I am only getting an example of .after function and so on.

I have tried the following but it not working

var VignetteVal = 'vignetteC' + value + ':after';

for (var i = 1; i <= 5; i++) {
  Img.parent().removeClass(('vignetteC' + i + ':after'));
}

Img.parent().addClass(VignetteVal);

But the above code add vignetteC2: after class to div like

<div class="vignetteC2: after">

`.vignetteC1` is a class, whereas `.vignetteC1:after` is not. — evolutionxbox, Nov 06 '17 at 11:54
https://stackoverflow.com/questions/8968992/jquery-and-pseudo-elements — abhit, Nov 06 '17 at 11:54
Possible duplicate of [How do you add pseudo classes to elements using jQuery?](https://stackoverflow.com/questions/12740967/how-do-you-add-pseudo-classes-to-elements-using-jquery) — Sanchit Patiyal, Nov 06 '17 at 11:56
I would pre-define `pseudo-elements` with particular class selectors in the CSS, then just toggle/add/remove the classes as required, so if I no longer require `.vignetteC5:after` I would rather remove the class `.vignetteC5`. To preserve the naming convention of your selectors it may be better to assign those `pseudo-elements` to classes like "`.pseudoEl`", then declare your properties like: `.vignetteC1.psuedoEl:after`, `.vignetteC2.psuedoEl:after`, `.vignetteC3.psuedoEl:after`, etc. — UncaughtTypeError, Nov 06 '17 at 13:38

Mihai T · Answer 1 · 2017-11-06T12:06:10.730

You are very confused about what :after is. It's a pseudo-element. It is NOT a class and not part of the DOM structure so it cannot be edited or added with javascript.

Read more here > https://www.w3schools.com/css/css_pseudo_elements.asp

:after pseudo-element adds content after the content of an element. It is not a class. To add content after an element you can use insertAfter() or you can use append to add content at the end of the current element. Also, there is an after() method

how to add / Remove :after class to div using jQuery

1 Answers1