modify pseudo select :after in javascript [duplicate]

Answer 1

You can add an extra class to you element that have a different property on the :after, like:

first you have this:

HTML:

    
lorem ipsum

CSS:

.slidingTag li:after {
      content: '';
      z-index: 3;
      height: 6px;
    }

then you got this:

New class that will override the property height :

.slidingTag-modifier li:after {
   content: '';
  z-index: 3;
  height: 10px !important;
}

final HTML:

    
lorem ipsum

To do that with javascript:

var element = document.querySelector('.slidingTag');
//use this instruction wherever you want to add the new class that will override the property
element.classList.add('slidingTag-modifier'); 
//works only on recent browsers

cheers!